Implement in app color palette saving

css/panels.css

@@ -1758,24 +1758,28 @@
 	}
 	#color_panel_head .side input {
 		width: 100%;
-		height: 28px;
+		height: 26px;
 		padding: 0 8px;
 		font-family: var(--font-code);
 		background-color: var(--color-back);
 	}
-	#color_panel_head #color_history {
+	#color_history {
 		width: 100%;
-		height: 16px;
+		height: 20px;
 		overflow-x: scroll;
 		overflow-y: hidden;
 		white-space: nowrap;
 		scroll-behavior: smooth;
 	}
-	#color_panel_head #color_history li {
+	#color_history > li {
 		vertical-align: top;
 		display: inline-block;
 		width: 30px;
-		height: 10px;
+		height: 12px;
+		cursor: pointer;
+	}
+	#color_history > li:hover {
+		border: 1px solid var(--color-back);
 	}
 
 	#main_colorpicker_preview {

js/interface/actions.js

@@ -2007,9 +2007,13 @@ const BARS = {
 				'export_palette',
 				'generate_palette',
 				'sort_palette',
+				'save_palette',
 				'load_palette',
 			]
 		})
+		Blockbench.onUpdateTo('4.3.0-beta.0', () => {
+			Toolbars.palette.add(BarItems.save_palette, -1);
+		})
 		Toolbars.color_picker = new Toolbar({
 			id: 'color_picker',
 			children: [

js/texturing/color.js

@@ -8,7 +8,10 @@ function colorDistance(color1, color2) {
 	);
 }
 (function() {
-	var palettes = {
+//
+StateMemory.init('color_palettes', 'array')
+
+var palettes = {
 	default: [
 		'#1a1a1b','#353637','#464849','#5d5f60','#757677','#868788','#979b9d','#b8bdbe','#dadedf','#ffffff',
 		'#9a080f','#b40a1a','#d21129','#ef2142','#ff5774','#bb7907','#cc9104','#edb508','#fcd720','#fef364',
@@ -45,7 +48,9 @@ function colorDistance(color1, color2) {
 		'#3003d9','#0c0293','#03193f','#3b1443','#622461','#93388f','#ca52c9','#c85086','#f68187','#f5555d',
 		'#ea323c','#c42430','#891e2b','#571c27',
 	]
-	}
+}
+
+
 Interface.definePanels(() => {
 	var saved_colors = localStorage.getItem('colors');
 	if (saved_colors) {
@@ -222,6 +227,7 @@ Interface.definePanels(() => {
 		},
 		menu: new Menu([
 			'sort_palette',
+			'save_palette',
 			'load_palette'
 		])
 	})
@@ -781,9 +787,43 @@ BARS.defineActions(function() {
 		icon: 'fa-tasks',
 		category: 'color',
 		click: function (e) {
-			new Menu(this.children).open(e.target)
+			new Menu(this.children()).open(e.target)
+		},
+		children() {
+			let options = this.default_palettes.slice();
+
+			StateMemory.color_palettes.forEach((palette, i) => {
+				let option = {
+					name: palette.name,
+					icon: 'bubble_chart',
+					id: i.toString(),
+					click() {
+						loadPalette(palette.colors);
 					},
 					children: [
+						{icon: 'update', name: 'menu.palette.load.update', description: 'menu.palette.load.update.desc', click() {
+							palette.colors.replace(ColorPanel.palette);
+							StateMemory.save('color_palettes');
+						}},
+						{icon: 'delete', name: 'generic.delete', click() {
+							StateMemory.color_palettes.remove(palette);
+							StateMemory.save('color_palettes');
+						}}
+					]
+				}
+				options.push(option);
+			})
+			
+			options.push(
+				'_',
+				{name: 'menu.palette.load.empty', icon: 'clear', id: 'empty', click: () => {
+					loadPalette([]);
+				}}
+			);
+			return options;
+		}
+	})
+	BarItems.load_palette.default_palettes = [
 		{name: 'menu.palette.load.default', icon: 'bubble_chart', id: 'default', click: () => {
 			loadPalette(palettes.default);
 		}},
@@ -793,11 +833,33 @@ BARS.defineActions(function() {
 		{name: 'Material', icon: 'bubble_chart', id: 'material', click: () => {
 			loadPalette(palettes.material);
 		}},
-			'_',
-			{name: 'menu.palette.load.empty', icon: 'clear', id: 'empty', click: () => {
-				loadPalette([]);
-			}},
-		]
+		'_'
+	];
+
+	new Action('save_palette', {
+		icon: 'playlist_add',
+		click(event) {	
+			let dialog = new Dialog({
+				id: 'save_palette',
+				title: 'action.save_palette',
+				width: 540,
+				form: {
+					name: {label: 'generic.name'},
+				},
+				onConfirm: function(formResult) {
+					if (!formResult.name) return;
+	
+					let palette = {
+						name: formResult.name,
+						colors: ColorPanel.palette.slice()
+					}
+
+					StateMemory.color_palettes.push(palette);
+					StateMemory.save('color_palettes');
+				}
+			})
+			dialog.show()
+		}
 	})
 
 

lang/en.json

@@ -1063,12 +1063,14 @@
 	"action.import_palette.desc": "Import a palette file",
 	"action.export_palette": "Export Palette",
 	"action.export_palette.desc": "Export palette as a .GPL file",
-	"action.generate_palette": "Generate Palette",
+	"action.generate_palette": "Generate Palette...",
 	"action.generate_palette.desc": "Generate palette from a texture",
 	"action.sort_palette": "Sort Palette",
 	"action.sort_palette.desc": "Sort all colors on the palette by color and brightness",
+	"action.save_palette": "Save Palette...",
+	"action.save_palette.desc": "Save the current color palette inside Blockbench for later use",
 	"action.load_palette": "Load Palette",
-	"action.load_palette.desc": "Load one of the built-in palette presets",
+	"action.load_palette.desc": "Load one of the built-in or saved palette presets",
 	"action.pick_screen_color": "Pick Screen Color",
 	"action.pick_screen_color.desc": "Pick a color from somewhere on your screen",
 
@@ -1435,6 +1437,8 @@
 
 	"menu.palette.load.default": "Default",
 	"menu.palette.load.empty": "Blank",
+	"menu.palette.load.update": "Update Palette",
+	"menu.palette.load.update.desc": "Updates this palette with the colors of the current Blockbench palette",
 
 	"menu.texture.face": "Apply to Face",
 	"menu.texture.blank": "Apply to Untextured Faces",