Improvements to tab overview

Update material icons

css/dialogs.css

@@ -1690,6 +1690,14 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 		right: 0;
 		left: 0;
 		pointer-events: none;
+		flex-direction: column;
+		align-items: center;
+	}
+	#tab_overview_search .search_bar {
+		top: 130px;
+		pointer-events: all;
+		box-shadow: 0 0 0 2px var(--color-accent);
+		width: min(100vw, 326px);
 	}
 	#tab_overview_grid {
 		display: flex;
@@ -1700,6 +1708,7 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 		max-width: 100%;
 		max-height: 86%;
 		overflow-y: auto;
+		pointer-events: all;
 	}
 	#tab_overview_grid > li {
 		width: 300px;
@@ -1709,7 +1718,6 @@ dialog#edit_bedrock_binding > .dialog_wrapper > .dialog_content {
 		cursor: pointer;
 		padding: 0 10px;
 		box-shadow: 0 0px 28px rgb(0 0 0 / 24%);
-		pointer-events: all;
 	}
 	#tab_overview_grid > li:hover {
 		color: var(--color-light);

js/api.js

@@ -279,10 +279,15 @@ const Blockbench = {
 		jq_dialog.css('position', 'absolute')
 
 		$('#dialog_wrapper').append(jq_dialog)
-		$('.dialog').hide()
-		$('#blackout').show()
 		jq_dialog.show()
 
+		jq_dialog[0].style.zIndex = 21 + Dialog.stack.length * 2;
+		
+		let blackout = document.getElementById('blackout');
+		blackout.style.display = 'block';
+		blackout.classList.toggle('darken', true);
+		blackout.style.zIndex = 20 + Dialog.stack.length * 2;
+
 		jq_dialog.css('top', limitNumber(window.innerHeight/2-jq_dialog.height()/2 - 140, 0, 2000)+'px')
 		if (options.width) {
 			jq_dialog.css('width', options.width+'px')

js/interface/dialog.js

@@ -793,7 +793,7 @@ window.EmptyDialog = class EmptyDialog extends Dialog {
 	constructor(id, options) {
 		super(id, options);
 
-		this.build = options.build;
+		if (options.build) this.build = options.build;
 	}
 	confirm(event) {
 		this.close(this.confirmIndex, event);
@@ -815,6 +815,14 @@ window.EmptyDialog = class EmptyDialog extends Dialog {
 	show() {
 		super.show()
 	}
+	build() {
+		this.object = Interface.createElement('div', {id: 'tab_overview', class: 'empty_dialog'});
+
+		if (this.component) {
+			this.component.name = 'dialog-content';
+			this.content_vue = new Vue(this.component).$mount(this.object, true);
+		}
+	}
 	delete() {
 		$(this.object).remove()
 	}

js/io/project.js

@@ -640,7 +640,7 @@ onVueSetup(() => {
 				this.new_tab.select();
 				setStartScreen(true);
 			},
-			searchTabs() {
+			tabOverview() {
 				BarItems.tab_overview.trigger();
 			},
 			mouseDown(tab, e1) {
@@ -1047,27 +1047,50 @@ BARS.defineActions(function() {
 			if (Project) Project.updateThumbnail();
 
 			let dialog = new EmptyDialog('tab_overview', {
-				build() {
-					this.object = Interface.createElement('div', {id: 'tab_overview', class: 'empty_dialog'});
-					
-					let entries = ModelProject.all.map(project => {
-						let img = new Image();
-						img.src = project.thumbnail;
-						if (!project.thumbnail) img.style.visibility = 'hidden';
-						let entry = Interface.createElement('li', {}, [
-							img,
-							project.name
-						])
-						entry.addEventListener('click', event => {
-							this.confirm();
+				component: {
+					data() {return {
+						search_term: '',
+						projects: ModelProject.all
+					}},
+					methods: {
+						select(project) {
+							Dialog.open.confirm();
 							project.select();
-						})
-						return entry;
-					})
-					let list = Interface.createElement('ul', {id: 'tab_overview_grid'}, entries);
-					this.object.append(list);
+						}
+					},
+					computed: {
+						filtered_projects() {
+							if (!this.search_term) return this.projects;
+							let term = this.search_term.toLowerCase();
+							return this.projects.filter(project => {
+								return project.name.toLowerCase().includes(term) || project.model_identifier?.toLowerCase().includes(term);
+							})
+						}
+					},
+					template: `
+						<div id="tab_overview">
+							<div id="tab_overview_search">
+								<search-bar id="tab_overview_search_bar" v-model="search_term"></search-bar>
+							</div>
+							<ul id="tab_overview_grid">
+								<li v-for="project in filtered_projects" @mousedown="select(project)">
+									<img :src="project.thumbnail" :style="{visibility: project.thumbnail ? 'unset' : 'hidden'}">
+									{{ project.name }}
+								</li>
+							</ul>
+						</div>
+					`
+				},
+				onConfirm() {
+					let projects = this.content_vue.filtered_projects;
+					if (this.content_vue.search_term) {
+						projects[0].select();
+					}
 				}
 			}).show();
+			Vue.nextTick(() => {
+				document.querySelector('#tab_overview_search input')?.focus()
+			})
 		}
 	})
 })