Another UI tweak

init.lua

@@ -20,13 +20,14 @@ local function lf(path)
 end
 
 i3 = {
+	version = 175,
 	data = core.deserialize(storage:get_string"data") or {},
 
 	settings = {
 		debug_mode = false,
 		max_favs = 6,
 		max_waypoints = 30,
-		min_fs_version = 4,
+		min_fs_version = 6,
 		item_btn_size = 1.1,
 		drop_bag_on_die = true,
 		save_interval = 600, -- Player data save interval (in seconds)

src/api.lua

@@ -344,7 +344,7 @@ end
 i3.add_sorting_method("alphabetical", {
 	description = S"Sort items by name (A-Z)",
 	func = function(list, data)
-		sorter(list, data.reverse_sorting, 1)
+		sorter(list, data, 1)
 		return list
 	end
 })
@@ -352,7 +352,7 @@ i3.add_sorting_method("alphabetical", {
 i3.add_sorting_method("numerical", {
 	description = S"Sort items by number of items per stack",
 	func = function(list, data)
-		sorter(list, data.reverse_sorting, 2)
+		sorter(list, data, 2)
 		return list
 	end,
 })

src/caches.lua

@@ -34,7 +34,7 @@ local function cache_groups(group, groups)
 	local items = i3.groups[group].items
 	if #items <= 1 then return end
 
-	local c, px, lim = 0, 256, 10
+	local px, lim, c = 64, 10, 0
 	local sprite = "[combine:WxH"
 
 	for _, item in ipairs(items) do
@@ -44,11 +44,10 @@ local function cache_groups(group, groups)
 
 		if def.drawtype and is_cube(def.drawtype) then
 			texture = get_cube(tiles)
-		elseif texture then
-			texture = texture:gsub("%^", "\\^"):gsub(":", "\\:") .. "\\^[resize\\:150x150"
 		end
 
 		if texture then
+			texture = texture:gsub("%^", "\\^"):gsub(":", "\\:") .. fmt("\\^[resize\\:%ux%u", px, px)
 			sprite = sprite .. fmt(":0,%u=%s", c * px, texture)
 			c++
 			if c == lim then break end

src/common.lua

@@ -77,6 +77,16 @@ local function toupper(str)
 	return str:gsub("%f[%w]%l", upper):gsub("_", " ")
 end
 
+local function utf8_len(str)
+	local c = 0
+
+	for _ in str:gmatch"[%z\1-\127\194-\244][\128-\191]*" do -- Arguably working duct-tape code
+		c++
+	end
+
+	return c
+end
+
 local function get_bag_description(data, stack)
 	local desc = translate(data.lang_code, stack:get_description())
 	      desc = split(desc, "(")[1] or desc
@@ -472,15 +482,16 @@ local function get_sorting_idx(name)
 	return idx
 end
 
-local function sorter(inv, reverse, mode)
+local function sorter(inv, data, mode)
 	sort(inv, function(a, b)
 		if mode == 1 then
-			a, b = a:get_name(), b:get_name()
+			a = translate(data.lang_code, a:get_short_description())
+			b = translate(data.lang_code, b:get_short_description())
 		else
 			a, b = a:get_count(), b:get_count()
 		end
 
-		if reverse then
+		if data.reverse_sorting then
 			return a > b
 		end
 
@@ -606,6 +617,7 @@ local function reset_data(data)
 	data.scrbar_rcp    = 1
 	data.scrbar_usg    = 1
 	data.query_item    = nil
+	data.enable_search = nil
 	data.recipes       = nil
 	data.usages        = nil
 	data.export_rcp    = nil
@@ -748,6 +760,7 @@ local _ = {
 	match = string.match,
 	gmatch = string.gmatch,
 	toupper = toupper,
+	utf8_len = utf8_len,
 
 	-- Table
 	maxn = table.maxn,

src/fields.lua

@@ -95,6 +95,10 @@ local function inv_fields(player, data, fields)
 		data.waypoint_see = nil
 		data.bag_rename = nil
 
+		if data.filter == "" then
+			data.enable_search = nil
+		end
+
 	elseif fields.trash then
 		data.show_settings = nil
 		data.confirm_trash = true
@@ -309,13 +313,21 @@ end
 local function rcp_fields(player, data, fields)
 	local sb_rcp, sb_usg = fields.scrbar_rcp, fields.scrbar_usg
 
+	if fields.filter and fields.filter == "" then
+		data.enable_search = nil
+	end
+
 	if fields.cancel then
 		reset_data(data)
 
 	elseif fields.exit then
 		data.query_item = nil
 
-	elseif fields.key_enter_field == "filter" or fields.search then
+	elseif fields.enable_search then
+		data.enable_search = true
+		return set_fs(player)
+
+	elseif fields.filter and (fields.key_enter_field == "filter" or fields.search) then
 		if fields.filter == "" then
 			reset_data(data)
 			return set_fs(player)

src/gui.lua

@@ -14,9 +14,9 @@ IMPORT("clr", "ESC", "msg", "check_privs")
 IMPORT("min", "max", "floor", "ceil", "round")
 IMPORT("reg_items", "reg_tools", "reg_entities")
 IMPORT("true_str", "is_fav", "is_num", "str_to_pos")
-IMPORT("S", "ES", "translate", "ItemStack", "toupper")
 IMPORT("get_sorting_idx", "compression_active", "compressible")
 IMPORT("get_bag_description", "get_detached_inv", "get_recipes")
+IMPORT("S", "ES", "translate", "ItemStack", "toupper", "utf8_len")
 IMPORT("maxn", "sort", "concat", "copy", "insert", "remove", "unpack")
 IMPORT("extract_groups", "groups_to_items", "is_group", "item_has_groups", "get_group")
 
@@ -38,24 +38,24 @@ local function weird_desc(str)
 end
 
 local function snip(str, limit)
-	return #str > limit and fmt("%s...", sub(str, 1, limit - 3)) or str
+	return fmt("%s...", sub(str, 1, limit - 3))
 end
 
-local function get_desc(item)
+local function get_desc(item, lang_code)
 	if sub(item, 1, 1) == "_" then
 		item = sub(item, 2)
 	end
 
 	local def = reg_items[item]
-
 	if not def then
 		return S("Unknown Item (@1)", item)
 	end
 
-	local desc = def.description
+	local desc = ItemStack(item):get_short_description()
+	      desc = translate(lang_code, desc)
 
 	if true_str(desc) then
-		desc = desc:trim():match("[^\n]*"):gsub("_", " ")
+		desc = desc:trim():gsub("_", " ")
 
 		if not find(desc, "%u") then
 			desc = toupper(desc)
@@ -175,11 +175,11 @@ local function get_award_list(data, fs, ctn_len, yextra, award_list, awards_unlo
 		local desc_lim, _desc = 39
 		local icon_size = 1.1
 
-		if #title > title_lim then
+		if utf8_len(title) > title_lim then
 			_title = snip(title, title_lim)
 		end
 
-		if #desc > desc_lim then
+		if utf8_len(desc) > desc_lim then
 			_desc = snip(desc, desc_lim)
 		end
 
@@ -318,7 +318,7 @@ local function get_waypoint_fs(fs, data, player, yextra, ctn_len)
 
 		local waypoint_name, lim = v.name, 18
 
-		if #v.name > lim then
+		if utf8_len(v.name) > lim then
 			waypoint_name = snip(waypoint_name, lim)
 		end
 
@@ -670,7 +670,7 @@ local function get_inventory_fs(player, data, fs)
 		--fs("style[player_model;bgcolor=black]")
 		model(0.2, 0.2, armor_skin and 4 or 3.4, ctn_hgt,
 			"player_model", props.mesh, textures, "0,-150", "false", "false",
-			fmt("%u,%u%s", anim.x, anim.y, data.fs_version >= 5 and ";30" or ""))
+			fmt("%u,%u;30", anim.x, anim.y))
 	else
 		local size = 2.5
 		image(0.7, 0.2, size, size * props.visual_size.y, props.textures[1])
@@ -750,7 +750,7 @@ local function get_inventory_fs(player, data, fs)
 	show_popup(fs, data)
 end
 
-local function get_tooltip(item, info, pos)
+local function get_tooltip(item, info, pos, lang_code)
 	local tooltip
 
 	if info.groups then
@@ -768,7 +768,7 @@ local function get_tooltip(item, info, pos)
 			tooltip = S("Any item belonging to the groups: @1", groupstr)
 		end
 	else
-		tooltip = info.meta_desc or get_desc(item)
+		tooltip = info.meta_desc or get_desc(item, lang_code)
 	end
 
 	local function add(str)
@@ -786,7 +786,7 @@ local function get_tooltip(item, info, pos)
 	if info.replace then
 		for i = 1, #info.replace.items do
 			local rpl = ItemStack(info.replace.items[i]):get_name()
-			local desc = clr("#ff0", get_desc(rpl))
+			local desc = clr("#ff0", get_desc(rpl, lang_code))
 
 			if info.replace.type == "cooking" then
 				tooltip = add(S("Replaced by @1 on smelting", desc))
@@ -813,12 +813,13 @@ local function get_tooltip(item, info, pos)
 
 		if several then
 			for i = 1, #info.tools do
-				names = fmt("%s\t\t- %s\n", names, clr("#ff0", get_desc(info.tools[i])))
+				names = fmt("%s\t\t- %s\n", names, clr("#ff0", get_desc(info.tools[i], lang_code)))
 			end
 
 			tooltip = add(S("Only drop if using one of these tools: @1", sub(names, 1, -2)))
 		else
-			tooltip = add(S("Only drop if using this tool: @1", clr("#ff0", get_desc(info.tools[1]))))
+			tooltip = add(S("Only drop if using this tool: @1",
+					clr("#ff0", get_desc(info.tools[1], lang_code))))
 		end
 	end
 
@@ -883,7 +884,6 @@ local function get_output_fs(fs, data, rcp, is_recipe, shapeless, right, btn_siz
 	local name  = item:get_name()
 	local count = item:get_count()
 	local wear  = item:get_wear()
-	local bt_s  = BTN_SIZE * 1.2
 	local _name = fmt("_%s", name)
 	local pos
 
@@ -899,11 +899,11 @@ local function get_output_fs(fs, data, rcp, is_recipe, shapeless, right, btn_siz
 		inv:set_stack("main", 1, item)
 		pos = {x = X + 0.11, y = Y}
 	else
-		image(X, Y - 0.11, bt_s, bt_s, PNG.slot)
-		item_image_button(
-			X + 0.11, Y, BTN_SIZE, BTN_SIZE,
-			fmt("%s %u %u", name, count * (is_recipe and data.scrbar_rcp or data.scrbar_usg or 1), wear),
-			_name, "")
+		local size = BTN_SIZE * 1.2
+		slot(X, Y - 0.11, size, size)
+
+		count *= (is_recipe and data.scrbar_rcp or data.scrbar_usg or 1)
+		item_image_button(X + 0.11, Y, BTN_SIZE, BTN_SIZE, fmt("%s %u %u", name, count, wear), _name, "")
 	end
 
 	local def = reg_items[name]
@@ -927,7 +927,7 @@ local function get_output_fs(fs, data, rcp, is_recipe, shapeless, right, btn_siz
 	}
 
 	if next(infos) then
-		fs(get_tooltip(_name, infos, pos))
+		fs(get_tooltip(_name, infos, pos, data.lang_code))
 	end
 end
 
@@ -998,7 +998,7 @@ local function get_grid_fs(fs, data, rcp, is_recipe)
 		if is_group(name) then
 			groups = group_cache and group_cache.groups or extract_groups(name)
 			name = group_cache and (group_cache.stereotype or group_cache.items[1]) or
-				groups_to_items(groups)[1]
+				groups_to_items(groups)[1] or ""
 		end
 
 		local label = groups and "\nG" or ""
@@ -1026,24 +1026,25 @@ local function get_grid_fs(fs, data, rcp, is_recipe)
 		end
 
 		if not large_recipe then
-			image(X, Y, btn_size, btn_size, PNG.slot)
+			slot(X, Y, btn_size, btn_size)
 		end
 
 		local btn_name = groups and fmt("group!%s!%s", groups[1], name) or name
-		local _count = count * (is_recipe and data.scrbar_rcp or data.scrbar_usg or 1)
+		count *= (is_recipe and data.scrbar_rcp or data.scrbar_usg or 1)
 
 		if group_cache and group_cache.sprite and not large_recipe then
 			local sprite = ESC(group_cache.sprite)
+			local size = btn_size - 0.02
 
 			item_image_button(X, Y, btn_size, btn_size, "", btn_name, "")
-			animated_image(X + 0.01, Y + 0.01, 1.89, 1.89, sprite, group_cache.count, 1000)
+			animated_image(X + 0.01, Y + 0.025, size, size, sprite, group_cache.count, 1500)
 			label(X + 0.45, Y + 0.18, label)
 
-			if _count > 1 then
-				label(X + 0.8, Y + 0.9, _count)
+			if count > 1 then
+				label(X + 0.8, Y + 0.9, count)
 			end
 		else
-			item_image_button(X, Y, btn_size, btn_size, fmt("%s %u", name, _count), btn_name, label)
+			item_image_button(X, Y, btn_size, btn_size, fmt("%s %u", name, count), btn_name, label)
 		end
 
 		local def = reg_items[name]
@@ -1068,7 +1069,7 @@ local function get_grid_fs(fs, data, rcp, is_recipe)
 		}
 
 		if next(infos) then
-			fs(get_tooltip(btn_name, infos))
+			fs(get_tooltip(btn_name, infos, nil, data.lang_code))
 		end
 	end
 
@@ -1181,19 +1182,19 @@ local function get_header(fs, data)
 	fs(fmt("tooltip[exit;%s]", ES"Back to item list"))
 
 	local desc_lim, name_lim = 34, 35
-	local desc = translate(data.lang_code, get_desc(data.query_item))
+	local desc = get_desc(data.query_item, data.lang_code)
 	      desc = ESC(desc)
 	local tech_name = data.query_item
 	local X = data.inv_width + 0.95
 	local Y1 = data.yoffset + 0.47
 	local Y2 = Y1 + 0.5
 
-	if #desc > desc_lim then
+	if utf8_len(desc) > desc_lim then
 		tooltip(X, Y1 - 0.1, 5.7, 0.24, desc)
 		desc = snip(desc, desc_lim)
 	end
 
-	if #tech_name > name_lim then
+	if utf8_len(tech_name) > name_lim then
 		tooltip(X, Y2 - 0.1, 5.7, 0.24, tech_name)
 		tech_name = snip(tech_name, name_lim)
 	end
@@ -1323,18 +1324,31 @@ local function get_items_fs(fs, data, player, full_height)
 	local ipp = rows * lines
 	local size = 0.85
 
-	bg9(data.inv_width + 0.1, 0, 7.9, full_height, PNG.bg_full, 10)
+	bg9(data.inv_width + 0.1, 0, 7.9, full_height, PNG.bg_full)
 
-	fs(fmt("box[%f,0.2;4.05,0.6;#bababa25]", data.inv_width + 0.3),
-	   "set_focus[filter]",
-	   fmt("field[%f,0.2;2.95,0.6;filter;;%s]", data.inv_width + 0.35, ESC(data.filter)),
-	   "field_close_on_enter[filter;false]")
+	if data.enable_search then
+		fs("set_focus[filter]",
+		   "style[filter;font_size=18;textcolor=#ccc]",
+		   fmt("field[%f,0.2;3.35,0.6;filter;;%s]", data.inv_width + 0.85, ESC(data.filter)),
+		   "field_close_on_enter[filter;false]")
+	else
+		fs"style_type[label;font=italic;font_size=18]"
+		label(data.inv_width + 0.9, 0.49, clr("#aaa", ES"Search..."))
+		button(data.inv_width + 0.8, 0.12, 4, 0.8, "enable_search", "")
+	end
 
-	image_button(data.inv_width + 3.35, 0.35, 0.3,  0.3,  "", "cancel", "")
-	image_button(data.inv_width + 3.85, 0.32, 0.35, 0.35, "", "search", "")
+	image_button(data.inv_width + 0.35, 0.32, 0.35, 0.35, "", "search", "")
 	image_button(data.inv_width + 5.27, 0.3,  0.35, 0.35, "", "prev_page", "")
 	image_button(data.inv_width + 7.45, 0.3,  0.35, 0.35, "", "next_page", "")
 
+	fs(fmt("tooltip[search;%s]", ES"Search"))
+
+	if true_str(data.filter) then
+		image_button(data.inv_width + 4.3, 0.4, 0.2, 0.2,  "", "cancel", "")
+		fs(fmt("tooltip[cancel;%s]", ES"Clear"))
+		box(data.inv_width + 0.85, 0.75, 3.74, 0.01, "#f9826c")
+	end
+
 	data.pagemax = max(1, ceil(#items / ipp))
 
 	button(data.inv_width + 5.6, 0.14, 1.88, 0.7, "pagenum",
@@ -1342,12 +1356,15 @@ local function get_items_fs(fs, data, player, full_height)
 
 	if #items == 0 then
 		local lbl = ES"No item to show"
+		local icon, width, offset = PNG.no_result, 4, 2
 
 		if next(i3.recipe_filters) and #i3.init_items > 0 and data.filter == "" then
-			lbl = ES"Collect items to reveal more recipes"
+			lbl = ES"Collect items to reveal more recipes" -- Progressive mode, etc.
+			icon, width, offset = PNG.find_more, 2.5, 2.75
 		end
 
-		button(data.inv_width + 0.1, 3, 8, 1, "no_item", lbl)
+		image(data.inv_width + offset, 3.5, width, width, icon)
+		button(data.inv_width + 0.1, 7, 8, 1, "no_item", lbl)
 	else
 		local first_item = (data.pagenum - 1) * ipp
 
@@ -1362,7 +1379,7 @@ local function get_items_fs(fs, data, player, full_height)
 			      X -= (X * 0.045) + data.inv_width + 0.28
 
 			local Y = round((i % ipp - X) / rows + 1, 0)
-			      Y -= (Y * 0.085) + 0.95
+			      Y -= (Y * 0.085) + 0.92
 
 			insert(fs, fmt("item_image_button", X, Y, size, size, name, item, ""))
 
@@ -1382,11 +1399,13 @@ local function get_items_fs(fs, data, player, full_height)
 
 	for i, title in ipairs(_tabs) do
 		local selected = i == data.itab
-		fs(fmt([[style_type[image_button;fgimg=%s;fgimg_hovered=%s;noclip=true;
-			font_size=16;textcolor=%s;content_offset=0;sound=i3_tab] ]],
-		selected and PNG.tab_small_hover or PNG.tab_small,
-		PNG.tab_small_hover, selected and "#fff" or "#ddd"))
+		local hover_texture = selected and PNG.tab_small_hover or PNG.tab_small
 
+		fs(fmt([[style_type[image_button;bgimg=%s;bgimg_hovered=%s;
+			bgimg_middle=14,0,-14,-14;padding=-14,0,14,14] ]], hover_texture, PNG.tab_small_hover))
+
+		fs(fmt("style_type[image_button;noclip=true;font_size=16;textcolor=%s;content_offset=0;sound=i3_tab]",
+			selected and "#fff" or "#ddd"))
 		fs"style_type[image_button:hovered;textcolor=#fff]"
 		image_button((data.inv_width - 0.65) + (i * (tab_len + 0.1)),
 			full_height, tab_len, tab_hgh, "", fmt("itab_%u", i), title)
@@ -1403,7 +1422,7 @@ local function get_favs(fs, data)
 		local Y = data.yoffset + 0.8
 
 		if data.query_item == item then
-			image(X, Y, btn_size, btn_size, PNG.slot)
+			slot(X, Y, btn_size, btn_size)
 		end
 
 		item_image_button(X, Y, btn_size, btn_size, item, name, "")
@@ -1423,7 +1442,7 @@ local function get_panels(fs, data, player)
 			data.yoffset += panels[i - 1].height + 0.1
 		end
 
-		bg9(data.inv_width + 0.1, data.yoffset, 7.9, panel.height, PNG.bg_full, 10)
+		bg9(data.inv_width + 0.1, data.yoffset, 7.9, panel.height, PNG.bg_full)
 
 		local is_recipe, is_usage = panel.name == "recipes", panel.name == "usages"
 		panel.func(fs, data, player, panel, is_recipe, is_usage)
@@ -1455,11 +1474,18 @@ local function get_tabs_fs(fs, player, data, full_height)
 		end
 
 		local selected = i == data.tab
+		local bgimg = selected and (btm and PNG.tab_hover or PNG.tab_hover_top) or
+				(btm and PNG.tab or PNG.tab_top)
+		local bgimg_hover = btm and PNG.tab_hover or PNG.tab_hover_top
 
-		fs(fmt([[style_type[image_button;fgimg=%s;fgimg_hovered=%s;noclip=true;
-			font_size=16;textcolor=%s;content_offset=0;sound=i3_tab] ]],
-		selected and (btm and PNG.tab_hover or PNG.tab_hover_top) or (btm and PNG.tab or PNG.tab_top),
-		btm and PNG.tab_hover or PNG.tab_hover_top, selected and "#fff" or "#ddd"))
+		local middle = btm and "16,0,-16,-16" or "16,0,-16,0"
+		local padding = btm and "-16,0,16,16" or "-16,-16,16,16"
+
+		fs(fmt([[style_type[image_button;bgimg=%s;bgimg_hovered=%s;bgimg_middle=%s;padding=%s] ]],
+			bgimg, bgimg_hover, middle, padding))
+
+		fs(fmt("style_type[image_button;noclip=true;font_size=16;textcolor=%s;content_offset=0;sound=i3_tab]",
+			selected and "#fff" or "#ddd"))
 
 		local X = (data.inv_width / 2) + (c * (tab_len + 0.1)) - ((tab_len + 0.05) * (shift / 2))
 		local Y = btm and full_height or -tab_hgh
@@ -1469,8 +1495,10 @@ local function get_tabs_fs(fs, player, data, full_height)
 
 		if true_str(def.image) then
 			local desc = translate(data.lang_code, def.description)
+			local desc_len = utf8_len(desc)
+
 			fs("style_type[image;noclip=true]")
-			image(X + (tab_len / 2) - ((#desc * 0.1) / 2) - 0.55, Y + 0.05, 0.35, 0.35, def.image)
+			image(X + (tab_len / 2) - ((desc_len * 0.1) / 2) - 0.55, Y + 0.05, 0.35, 0.35, def.image)
 		end
 
 		c++
@@ -1526,7 +1554,7 @@ local function make_fs(player, data)
 	fs(fmt("formspec_version[%u]size[%f,%f]no_prepend[]bgcolor[#0000]",
 		i3.settings.min_fs_version, data.inv_width + 8, full_height), styles)
 
-	bg9(0, 0, data.inv_width, full_height, PNG.bg_full, 10)
+	bg9(0, 0, data.inv_width, full_height, PNG.bg_full)
 
 	local tab = i3.tabs[data.tab]
 
@@ -1540,11 +1568,11 @@ local function make_fs(player, data)
 		get_items_fs(fs, data, player, full_height)
 	end
 
-	local visible_tabs = 1
+	local visible_tabs = #i3.tabs
 
 	for _, def in ipairs(i3.tabs) do
-		if visible_tabs < 2 and def.access and def.access(player, data) then
-			visible_tabs++
+		if def.access and not def.access(player, data) then
+			visible_tabs -= 1
 		end
 	end
 

src/styles.lua

@@ -1,3 +1,5 @@
+local fmt = string.format
+
 local PNG = {
 	blank = "i3_blank.png",
 	bg = "i3_bg.png",
@@ -23,7 +25,7 @@ local PNG = {
 	sign = "i3_sign.png",
 	cancel = "i3_cancel.png",
 	export = "i3_export.png",
-	slot = "i3_slot.png",
+	slot = "i3_slot.png^\\[resize:128x128",
 	tab = "i3_tab.png",
 	tab_small = "i3_tab_small.png",
 	tab_top = "i3_tab.png^\\[transformFY",
@@ -42,6 +44,9 @@ local PNG = {
 	home = "i3_home.png",
 	flag = "i3_flag.png",
 	edit = "i3_edit.png",
+	no_result = "i3_no_result.png",
+	find_more = "i3_find_more.png",
+	search_outline = "i3_search_outline.png",
 
 	cancel_hover = "i3_cancel.png^\\[brighten",
 	search_hover = "i3_search.png^\\[brighten",
@@ -72,14 +77,15 @@ local styles = string.format([[
 	style_type[label,field;font_size=16]
 	style_type[button;border=false;content_offset=0]
 	style_type[image_button,item_image_button,checkbox,dropdown;border=false;sound=i3_click]
-	style_type[item_image_button;bgimg_hovered=%s]
+	style_type[item_image_button;bgimg_hovered=%s;bgimg_middle=9;padding=-9]
 
 	style[;sound=]
 	style[nofav;sound=i3_cannot]
 	style[pagenum,no_item,no_rcp;font=bold;font_size=18]
+	style[search;fgimg=%s;content_offset=0]
+	style[enable_search:hovered;bgimg=%s]
 	style[exit;fgimg=%s;fgimg_hovered=%s;content_offset=0]
 	style[cancel;fgimg=%s;fgimg_hovered=%s;content_offset=0]
-	style[search;fgimg=%s;fgimg_hovered=%s;content_offset=0]
 	style[prev_page,prev_recipe,prev_usage,prev_sort,prev_skin;fgimg=%s;fgimg_hovered=%s]
 	style[next_page,next_recipe,next_usage,next_sort,next_skin;fgimg=%s;fgimg_hovered=%s]
 	style[waypoint_add;fgimg=%s;fgimg_hovered=%s;content_offset=0]
@@ -94,9 +100,10 @@ local styles = string.format([[
 	style[confirm_trash_yes;sound=i3_trash]
 ]],
 PNG.slot,
+PNG.search_hover,
+PNG.search_outline,
 PNG.exit,     PNG.exit_hover,
 PNG.cancel,   PNG.cancel_hover,
-PNG.search,   PNG.search_hover,
 PNG.prev,     PNG.prev_hover,
 PNG.next,     PNG.next_hover,
 PNG.add,      PNG.add_hover,
@@ -109,9 +116,10 @@ local fs_elements = {
 	tooltip = "tooltip[%f,%f;%f,%f;%s]",
 	button = "button[%f,%f;%f,%f;%s;%s]",
 	checkbox = "checkbox[%f,%f;%s;%s;%s]",
+	slot = "image[%f,%f;%f,%f;" .. fmt("%s;9]", PNG.slot),
 	item_image = "item_image[%f,%f;%f,%f;%s]",
 	hypertext = "hypertext[%f,%f;%f,%f;%s;%s]",
-	bg9 = "background9[%f,%f;%f,%f;%s;false;%u]",
+	bg9 = "background9[%f,%f;%f,%f;%s;false;12]",
 	scrollbar = "scrollbar[%f,%f;%f,%f;%s;%s;%u]",
 	model = "model[%f,%f;%f,%f;%s;%s;%s;%s;%s;%s;%s]",
 	image_button = "image_button[%f,%f;%f,%f;%s;%s;%s]",