Add plugin feature overview

css/dialogs.css

@@ -1460,6 +1460,32 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 	#plugin_browser_page .settings_list {
 		padding: 4px 20px;
 	}
+	#plugin_browser_page .features_list {
+		padding: 4px 20px;
+	}
+	li.plugin_feature_entry {
+		display: flex;
+		gap: 8px;
+		padding-left: 4px;
+		min-height: 28px;
+		align-items: center;
+	}
+	li.plugin_feature_entry.clickable {
+		cursor: pointer;
+	}
+	li.plugin_feature_entry.clickable:hover {
+		color: var(--color-light);
+	}
+	li.plugin_feature_entry label {
+		white-space: nowrap;
+		cursor: inherit;
+	}
+	li.plugin_feature_entry > .description,
+	li.plugin_feature_entry > .extra_info {
+		color: var(--color-subtle_text);
+		margin-left: auto;
+		cursor: inherit;
+	}
 
 	
 	#plugin_browser_start_page > img {

js/interface/actions.js

@@ -47,7 +47,7 @@ class BarItem extends EventSystem {
 			this.keybind.setAction(this.id)
 			this.work_in_dialog = data.work_in_dialog === true
 			this.uses = 0;
-			Keybinds.actions.push(this)
+			Keybinds.actions.push(this);
 		}
 	}
 	conditionMet() {

js/interface/panels.js

@@ -11,6 +11,7 @@ class Panel extends EventSystem {
 		this.condition = data.condition;
 		this.display_condition = data.display_condition;
 		this.previous_slot = 'left_bar';
+		this.plugin = data.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
 
 		this.growable = data.growable;
 

js/interface/start_screen.js

@@ -1,5 +1,8 @@
 const StartScreen = {
-	loaders: {}
+	loaders: {},
+	open() {
+		Interface.tab_bar.openNewTab();
+	}
 };
 
 function addStartScreenSection(id, data) {
@@ -542,6 +545,7 @@ class ModelLoader {
 		this.show_on_start_screen = true;
 		this.confidential = options.confidential || false;
 		this.condition = options.condition;
+		this.plugin = options.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
 
 		this.format_page = options.format_page;
 		this.onFormatPage = options.onFormatPage;

js/io/codec.js

@@ -24,6 +24,7 @@ class Codec extends EventSystem {
 		this.format = data.format;
 		this.load_filter = data.load_filter;
 		this.export_action = data.export_action;
+		this.plugin = data.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
 	}
 	getExportOptions() {
 		let options = {};

js/io/format.js

@@ -19,6 +19,7 @@ class ModelFormat {
 		this.show_in_new_list = true;
 		this.can_convert_to = true;
 		this.confidential = false;
+		this.plugin = data.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
 
 		for (let id in ModelFormat.properties) {
 			ModelFormat.properties[id].reset(this);

js/plugin_loader.js

@@ -973,6 +973,177 @@ BARS.defineActions(function() {
 					});
 				},
 
+				// Features
+				getPluginFeatures(plugin) {
+					let types = [];
+
+					let formats = [];
+					for (let id in Formats) {
+						if (Formats[id].plugin == plugin.id) formats.push(Formats[id]);
+					}
+					if (formats.length) {
+						types.push({
+							id: 'formats',
+							name: tl('data.format'),
+							features: formats.map(format => {
+								return {
+									id: format.id,
+									name: format.name,
+									icon: format.icon,
+									description: format.description,
+									click: format.show_on_start_screen && (() => {
+										Dialog.open.close();
+										StartScreen.open();
+										StartScreen.vue.loadFormat(format);
+									})
+								}
+							})
+						})
+					}
+
+					let loaders = [];
+					for (let id in ModelLoader.loaders) {
+						if (ModelLoader.loaders[id].plugin == plugin.id) loaders.push(ModelLoader.loaders[id]);
+					}
+					if (loaders.length) {
+						types.push({
+							id: 'loaders',
+							name: tl('format_category.loaders'),
+							features: loaders.map(loader => {
+								return {
+									id: loader.id,
+									name: loader.name,
+									icon: loader.icon,
+									description: loader.description,
+									click: loader.show_on_start_screen && (() => {
+										Dialog.open.close();
+										StartScreen.open();
+										StartScreen.vue.loadFormat(loader);
+									})
+								}
+							})
+						})
+					}
+
+					let codecs = [];
+					for (let id in Codecs) {
+						if (Codecs[id].plugin == plugin.id) codecs.push(Codecs[id]);
+					}
+					if (codecs.length) {
+						types.push({
+							id: 'codecs',
+							name: 'Codec',
+							features: codecs.map(codec => {
+								return {
+									id: codec.id,
+									name: codec.name,
+									icon: codec.export_action ? codec.export_action.icon : 'save',
+									description: codec.export_action ? codec.export_action.description : ''
+								}
+							})
+						})
+					}
+
+					let bar_items = Keybinds.actions.filter(action => action.plugin == plugin.id);
+					let tools = bar_items.filter(action => action instanceof Tool);
+					let other_actions = bar_items.filter(action => action instanceof Tool == false);
+
+					if (tools.length) {
+						types.push({
+							id: 'tools',
+							name: tl('category.tools'),
+							features: tools.map(tool => {
+								return {
+									id: tool.id,
+									name: tool.name,
+									icon: tool.icon,
+									description: tool.description,
+									extra_info: tool.keybind.label,
+									click: Condition(tool.condition) && (() => {
+										ActionControl.select(tool.name);
+									})
+								}
+							})
+						})
+					}
+					if (other_actions.length) {
+						types.push({
+							id: 'actions',
+							name: 'Action',
+							features: other_actions.map(action => {
+								return {
+									id: action.id,
+									name: action.name,
+									icon: action.icon,
+									description: action.description,
+									extra_info: action.keybind.label,
+									click: Condition(action.condition) && (() => {
+										ActionControl.select(action.name);
+									})
+								}
+							})
+						})
+					}
+
+					let panels = [];
+					for (let id in Panels) {
+						if (Panels[id].plugin == plugin.id) panels.push(Panels[id]);
+					}
+					if (panels.length) {
+						types.push({
+							id: 'panels',
+							name: tl('data.panel'),
+							features: panels.map(panel => {
+								return {
+									id: panel.id,
+									name: panel.name,
+									icon: panel.icon
+								}
+							})
+						})
+					}
+
+					let setting_list = [];
+					for (let id in settings) {
+						if (settings[id].plugin == plugin.id) setting_list.push(settings[id]);
+					}
+					if (setting_list.length) {
+						types.push({
+							id: 'settings',
+							name: tl('data.setting'),
+							features: setting_list.map(setting => {
+								return {
+									id: setting.id,
+									name: setting.name,
+									icon: setting.icon,
+									click: () => {
+										this.page_tab = 'settings';
+									}
+								}
+							})
+						})
+					}
+
+					let validator_checks = Validator.checks.filter(check => check.plugin == plugin.id);
+					if (validator_checks.length) {
+						types.push({
+							id: 'validator_checks',
+							name: 'Validator Check',
+							features: validator_checks.map(validator_check => {
+								return {
+									id: validator_check.id,
+									name: validator_check.name,
+									icon: 'task_alt'
+								}
+							})
+						})
+					}
+					//TODO
+					//Modes
+					//Element Types
+					return types;
+				},
+
 				getIconNode: Blockbench.getIconNode,
 				pureMarked,
 				tl
@@ -1187,17 +1358,19 @@ BARS.defineActions(function() {
 							</ul>
 						</div>
 						
-						<div v-if="page_tab == 'features'">
-							Tools
-							Actions
-							Formats
-							Codecs
-							Panels
-							Modes
-							Settings
-							Validator Checks
-							Element Types
-						</div>
+						<ul v-if="page_tab == 'features'" class="features_list">
+							<li v-for="type in getPluginFeatures(selected_plugin)" :key="type.id">
+								<h4>{{ type.name }}</h4>
+								<ul>
+									<li v-for="feature in type.features" :key="feature.id" class="plugin_feature_entry" :class="{clickable: feature.click}" @click="feature.click && feature.click($event)">
+										<dynamic-icon v-if="feature.icon" :icon="feature.icon" />
+										<label>{{ feature.name }}</label>
+										<div class="description">{{ feature.description }}</div>
+										<div v-if="feature.extra_info" class="extra_info">{{ feature.extra_info }}</div>
+									</li>
+								</ul>
+							</li>
+						</ul>
 						
 					</div>
 					

js/validator.js

@@ -97,6 +97,7 @@ class ValidatorCheck {
 		this.errors = [];
 		this.warnings = [];
 		this._timeout = null;
+		this.plugin = options.plugin || (typeof Plugins != 'undefined' ? Plugins.currently_loading : '');
 
 		Validator.checks.push(this);
 		Validator.updateCashedTriggers();

lang/en.json

@@ -27,6 +27,7 @@
 	"data.origin": "Pivot",
 	"data.plugin": "Plugin",
 	"data.preview": "Preview",
+	"data.panel": "Panel",
 	"data.toolbar": "Toolbar",
 	"data.separator": "Separator",
 	"data.separator.spacer": "Spacer",