From 5963f624f2cc17041e4b7aaf593e34ba749e935c Mon Sep 17 00:00:00 2001
From: JannisX11 <jannis4236@gmail.com>
Date: Sat, 15 Jun 2024 00:12:20 +0200
Subject: [PATCH] Add classes to improve theming

---
 index.html                   |  3 +--
 js/desktop.js                |  2 +-
 js/interface/start_screen.js | 16 ++++++++--------
 js/plugin_loader.js          |  6 +++---
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index bb688fde..85c135e1 100644
--- a/index.html
+++ b/index.html
@@ -298,8 +298,7 @@
 			<div id="right_bar" class="sidebar"></div>
 
 			<div id="center">
-				<ul id="toast_notification_list">
-				</ul>
+				<ul id="toast_notification_list"></ul>
 
 				<div id="top_slot"></div>
 				<div id="preview">
diff --git a/js/desktop.js b/js/desktop.js
index 98c243e9..079031a7 100644
--- a/js/desktop.js
+++ b/js/desktop.js
@@ -732,7 +732,7 @@ ipcRenderer.on('update-available', (event, arg) => {
 		})
 
 	} else {
-		addStartScreenSection({
+		addStartScreenSection('update_notification', {
 			color: 'var(--color-back)',
 			graphic: {type: 'icon', icon: 'update'},
 			text: [
diff --git a/js/interface/start_screen.js b/js/interface/start_screen.js
index a7413b26..4fffe9aa 100644
--- a/js/interface/start_screen.js
+++ b/js/interface/start_screen.js
@@ -36,7 +36,7 @@ function addStartScreenSection(id, data) {
 		data = id;
 		id = '';
 	}
-	var obj = $(Interface.createElement('section', {id}))
+	var obj = $(Interface.createElement('section', {class: 'start_screen_section', section_id: id}))
 	if (typeof data.graphic === 'object') {
 		var left = $('<div class="start_screen_left graphic"></div>')
 		obj.append(left)
@@ -140,9 +140,9 @@ function addStartScreenSection(id, data) {
 	if (data.last) {
 		$('#start_screen > content').append(obj);
 	} else if (data.insert_after) {
-		$('#start_screen > content').find(`#${data.insert_after}`).after(obj);
+		$('#start_screen > content').find(`.start_screen_section[section_id="${data.insert_after}"]`).after(obj);
 	} else if (data.insert_before) {
-		$('#start_screen > content').find(`#${data.insert_before}`).before(obj);
+		$('#start_screen > content').find(`.start_screen_section[section_id="${data.insert_before}"]`).before(obj);
 	} else {
 		$('#start_screen > content').prepend(obj);
 	}
@@ -375,7 +375,7 @@ onVueSetup(async function() {
 		template: `
 			<div id="start_screen">
 				<content>
-					<section id="splash_screen" v-if="show_splash_screen">
+					<section id="splash_screen" v-if="show_splash_screen" section_id="splash_screen">
 						<div class="splash_art_slideshow_image" :style="{backgroundImage: getBackground(slideshow[slideshow_selected].source)}">
 							<p v-if="slideshow[slideshow_selected].description" class="start_screen_graphic_description" v-html="pureMarked(slideshow[slideshow_selected].description)"></p>
 						</div>
@@ -387,7 +387,7 @@ onVueSetup(async function() {
 						<i class="material-icons start_screen_close_button" @click="show_splash_screen = false">clear</i>
 					</section>
 
-					<section id="start_files">
+					<section id="start_files" section_id="start_files">
 
 						<div class="start_screen_left" v-if="!(selected_format_id && mobile_layout)">
 							<h2>${tl('mode.start.new')}</h2>
@@ -581,7 +581,7 @@ ModelLoader.loaders = {};
 		let twitter_ad;
 		if (Blockbench.startup_count < 20 && Blockbench.startup_count % 5 === 4) {
 			twitter_ad = true;
-			addStartScreenSection({
+			addStartScreenSection('twitter_link', {
 				color: '#1da1f2',
 				text_color: '#ffffff',
 				graphic: {type: 'icon', icon: 'fab.fa-twitter'},
@@ -594,7 +594,7 @@ ModelLoader.loaders = {};
 		}
 		//Discord
 		if (Blockbench.startup_count < 6 && !twitter_ad) {
-			addStartScreenSection({
+			addStartScreenSection('discord_link', {
 				color: '#5865F2',
 				text_color: '#ffffff',
 				graphic: {type: 'icon', icon: 'fab.fa-discord'},
@@ -666,7 +666,7 @@ ModelLoader.loaders = {};
 					}
 				},
 				template: `
-					<section id="quick_setup">
+					<section id="quick_setup" section_id="quick_setup" class="start_screen_section">
 						<i class="material-icons start_screen_close_button" @click="close()">clear</i>
 						<h2>${tl('mode.start.quick_setup')}</h2>
 
diff --git a/js/plugin_loader.js b/js/plugin_loader.js
index 23f44b7a..87670bcc 100644
--- a/js/plugin_loader.js
+++ b/js/plugin_loader.js
@@ -1267,8 +1267,8 @@ BARS.defineActions(function() {
 							<div :class="{open: tab == 'installed'}" @click="setTab('installed')">${tl('dialog.plugins.installed')}</div>
 							<div :class="{open: tab == 'available'}" @click="setTab('available')">${tl('dialog.plugins.available')}</div>
 						</div>
-						<ul class="list" id="plugin_list" ref="plugin_list">
-							<li v-for="plugin in viewed_plugins" :plugin="plugin.id" :class="{plugin: true, testing: plugin.fromFile, selected: plugin == selected_plugin, disabled_plugin: plugin.disabled, incompatible: plugin.isInstallable() !== true}" @click="selectPlugin(plugin)" @contextmenu="selectPlugin(plugin); plugin.showContextMenu($event)">
+						<ul class="list" :class="{paginated_list: pages.length > 1}" id="plugin_list" ref="plugin_list">
+							<li v-for="plugin in viewed_plugins" :plugin="plugin.id" :class="{plugin: true, testing: plugin.fromFile, selected: plugin == selected_plugin, disabled_plugin: plugin.disabled, installed_plugin: plugin.installed, incompatible: plugin.isInstallable() !== true}" @click="selectPlugin(plugin)" @contextmenu="selectPlugin(plugin); plugin.showContextMenu($event)">
 								<div>
 									<div class="plugin_icon_area">
 										<img v-if="plugin.hasImageIcon()" :src="plugin.getIcon()" width="48" height="48px" />
@@ -1292,7 +1292,7 @@ BARS.defineActions(function() {
 						</ol>
 					</div>
 					
-					<div id="plugin_browser_page" v-if="selected_plugin">
+					<div id="plugin_browser_page" v-if="selected_plugin" :class="{plugin_disabled: selected_plugin.disabled, plugin_installed: selected_plugin.installed}">
 						<div v-if="isMobile" @click="selectPlugin(null);" class="plugin_browser_back_button">
 							<i class="material-icons icon">arrow_back_ios</i>
 							${tl('generic.navigate_back')}</div>