+
+
+{#if configuring}
+
+ {$spaceSeperatedNames ? "Inventory Preset" : "InventoryPreset"}
+
+
+
+
+ configuring = true}>
+ {#each preset.items as group, idx (idx)}
+
+ 
+{:else if item.type === "ANY"}
+ 
+{:else}
+ 
+{/if}
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/ItemPreview.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/ItemPreview.svelte
new file mode 100644
index 00000000000..1495e1ccc92
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/ItemPreview.svelte
@@ -0,0 +1,42 @@
+
+
+
+ {#if rendered.length > 0}
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/ItemGroupSelector.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/ItemGroupSelector.svelte
new file mode 100644
index 00000000000..ed7e245a903
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/ItemGroupSelector.svelte
@@ -0,0 +1,186 @@
+
+
+
+
+
+
+
+ {/if}
+
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/PresetModal.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/PresetModal.svelte
new file mode 100644
index 00000000000..4b58aa36890
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/PresetModal.svelte
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+
+ {#each items as item, idx}
+ expanded = !expanded}>
+ 
+
+
+ {#if expanded}
+
+ expanded = false}
+ use:portal
+ >
+ !choiceItems.includes(it)}
+ />
+
+ {/if}
+ removeItem(idx)}>
+
+ {/each}
+
+
+
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/PresetTooltip.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/PresetTooltip.svelte
new file mode 100644
index 00000000000..dc6523c3992
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/PresetTooltip.svelte
@@ -0,0 +1,137 @@
+
+
+ hovered = true}
+ onmouseleave={() => hovered = false}
+>
+
+
+
+ Preset editor
+
+
+
+
+
+ HOTBAR
+
+
+
+
+ LIMITS
+
+ 
+ {#if hovered}
+
+ {text}
+
+ {/if}
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/item.scss b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/item.scss
new file mode 100644
index 00000000000..36e2d41181b
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/item.scss
@@ -0,0 +1,11 @@
+@use "sass:color";
+@use "../../../../../colors.scss" as *;
+
+.item-background {
+ background-color: rgba($clickgui-base-color, 0.85);
+ outline: 1px solid color.adjust($clickgui-text-color, $lightness: -85%);
+
+ &:hover {
+ outline: 1px solid color.adjust($clickgui-text-color, $lightness: -70%);
+ }
+}
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/maxStacks/MaxStacksContainer.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/maxStacks/MaxStacksContainer.svelte
new file mode 100644
index 00000000000..1eea9a0a824
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/maxStacks/MaxStacksContainer.svelte
@@ -0,0 +1,57 @@
+
+
+
+
+{#if groups.length > 0}
+
+
+{/if}
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/maxStacks/StackContainer.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/maxStacks/StackContainer.svelte
new file mode 100644
index 00000000000..60f46cdc8d2
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/maxStacks/StackContainer.svelte
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+ {#each groups as group, idx}
+ handleDelete(idx)}
+ />
+ {/each}
+
+
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupComponent.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupComponent.svelte
new file mode 100644
index 00000000000..c09e096545b
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupComponent.svelte
@@ -0,0 +1,126 @@
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupPreferenceSelector.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupPreferenceSelector.svelte
new file mode 100644
index 00000000000..200a43e6c70
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupPreferenceSelector.svelte
@@ -0,0 +1,141 @@
+
+
+ expanded = !expanded}
+ >
+
+
+ {#if expanded}
+
+
+
+
+ {/if}
+
+ {idx === 0 ? "Offhand" : idx}
+
+
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupPreview.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupPreview.svelte
new file mode 100644
index 00000000000..f2fe177d62f
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/GroupPreview.svelte
@@ -0,0 +1,48 @@
+
+
+
+ Preference
+
+
+
+
+
+
+
+
+
+
+ {#if showingItems}
+
+
+ {#if group.length === 0}
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/Items.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/Items.svelte
new file mode 100644
index 00000000000..769847ecd7b
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/Items.svelte
@@ -0,0 +1,92 @@
+
+
+
+
+
+
+ {:else}
+ {#each group.slice(0, 3) as item}
+
+
+ {/each}
+
+ {#if group.length > 3}
+ +{Math.min(9, group.length - 3)}
+ {/if}
+ {/if}
+
+ {#each items as group, idx (idx)}
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/PresetItemSelector.svelte b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/PresetItemSelector.svelte
new file mode 100644
index 00000000000..390ebcfe4cd
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/presetItem/PresetItemSelector.svelte
@@ -0,0 +1,305 @@
+
+
+
+
+ handleDragStart(e, idx)}
+ on:dragover={(e) => handleDragOver(e, idx)}
+ on:dragend={handleDragEnd}
+ >
+
+
+ {#if idx === 0}
+
+ {/if}
+ {/each}
+
+
+
+
diff --git a/src-theme/src/routes/clickgui/setting/inventoryPreset/config/select.scss b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/select.scss
new file mode 100644
index 00000000000..0dfefc64f97
--- /dev/null
+++ b/src-theme/src/routes/clickgui/setting/inventoryPreset/config/select.scss
@@ -0,0 +1,121 @@
+@use "sass:color";
+@use "../../../../../colors.scss" as *;
+
+.selector-container-wrapper {
+ z-index: 9999;
+ position: absolute;
+ width: 250px;
+ max-height: 450px;
+ min-height: 0;
+ padding: 20px;
+ background-color: rgba($clickgui-base-color, 0.95);
+ outline: 1px solid color.adjust($clickgui-text-color, $lightness: -85%);
+ border-radius: 3px;
+}
+
+
+.select-title {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 500;
+ font-size: 16px;
+ color: $clickgui-text-color;
+}
+
+.select-selector {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+ height: 100%;
+}
+
+.icon-wrapper {
+ transition: background-color 0.3s ease;
+ background-color: rgba($clickgui-base-color, 0.85);
+ border: 1px solid color.adjust($clickgui-text-color, $lightness: -85%);
+ border-radius: 3px;
+ min-width: 30px;
+ min-height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.result-item {
+ display: flex;
+ height: 40px;
+ align-items: center;
+ gap: 10px;
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ .name {
+ color: $clickgui-text-color;
+ }
+
+ .icon-wrapper {
+ background-color: color.adjust($clickgui-text-color, $lightness: -80%);
+ }
+ }
+}
+
+.icon {
+ width: 20px;
+ height: 20px;
+}
+
+.name {
+ transition: color 0.3s ease;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: $clickgui-text-dimmed-color;
+}
+
+.search {
+ position: relative;
+}
+
+.search-input {
+ width: 100%;
+ height: 35px;
+ border-radius: 3px;
+ border: none;
+ background: transparent;
+ padding-left: 35px;
+ outline: solid 1px color.adjust($clickgui-text-color, $lightness: -90%);
+ color: white;
+}
+
+.search-icon {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 35px;
+ height: 35px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ & > img {
+ width: 20px;
+ height: 20px;
+ }
+}
+
+.results {
+ height: 100%;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
+.items-group-title {
+ font-size: 12px;
+ color: rgba($clickgui-text-dimmed-color, 0.6);
+ font-weight: 600;
+ margin-left: 5px;
+ text-transform: uppercase;
+}
diff --git a/src-theme/src/util/utils.ts b/src-theme/src/util/utils.ts
new file mode 100644
index 00000000000..526271114d8
--- /dev/null
+++ b/src-theme/src/util/utils.ts
@@ -0,0 +1,32 @@
+export function portal(node: HTMLElement, target: HTMLElement = document.body) {
+ target.appendChild(node);
+ return {
+ destroy() {
+ if (node.parentNode) node.parentNode.removeChild(node);
+ }
+ };
+}
+
+export function clickOutside(node: HTMLElement, callback: (event: MouseEvent) => void) {
+ const handleClick = (event: MouseEvent) => {
+ if (!node.contains(event.target as Node)) {
+ callback(event);
+ }
+ };
+
+ const handleDrag = (event: DragEvent) => {
+ if (!node.contains(event.target as Node)) {
+ callback(event);
+ }
+ };
+
+ document.addEventListener('click', handleClick, true);
+ document.addEventListener('dragstart', handleDrag, true);
+
+ return {
+ destroy() {
+ document.removeEventListener('click', handleClick, true);
+ document.removeEventListener('dragstart', handleDrag, true);
+ }
+ };
+}
diff --git a/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/GsonInstance.kt b/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/GsonInstance.kt
index 92be4fba61a..dc3071cd48a 100644
--- a/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/GsonInstance.kt
+++ b/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/GsonInstance.kt
@@ -30,6 +30,8 @@ import net.ccbluex.liquidbounce.config.gson.serializer.minecraft.*
import net.ccbluex.liquidbounce.config.gson.stategies.ExcludeStrategy
import net.ccbluex.liquidbounce.config.gson.stategies.ProtocolExcludeStrategy
import net.ccbluex.liquidbounce.config.types.NamedChoice
+import net.ccbluex.liquidbounce.features.inventoryPreset.InventoryPreset
+import net.ccbluex.liquidbounce.features.inventoryPreset.FrontendSlotPreference
import net.ccbluex.liquidbounce.config.types.nesting.ChoiceConfigurable
import net.ccbluex.liquidbounce.config.types.nesting.Configurable
import net.ccbluex.liquidbounce.integration.theme.component.Component
@@ -147,6 +149,8 @@ internal fun GsonBuilder.registerCommonTypeAdapters() =
.registerTypeHierarchyAdapter(ClosedRange::class.javaObjectType, RangeAdapter)
.registerTypeHierarchyAdapter(IntRange::class.javaObjectType, IntRangeAdapter)
.registerTypeHierarchyAdapter(Item::class.javaObjectType, ItemAdapter)
+ .registerTypeHierarchyAdapter(InventoryPreset::class.java, InventoryPresetAdapter)
+ .registerTypeHierarchyAdapter(FrontendSlotPreference::class.java, FrontendSlotPreferenceAdapter)
.registerTypeHierarchyAdapter(SoundEvent::class.javaObjectType, SoundEventAdapter)
.registerTypeHierarchyAdapter(StatusEffect::class.javaObjectType, StatusEffectAdapter)
.registerTypeHierarchyAdapter(Color4b::class.javaObjectType, ColorAdapter)
diff --git a/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/adapter/FrontendSlotPreferenceAdapter.kt b/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/adapter/FrontendSlotPreferenceAdapter.kt
new file mode 100644
index 00000000000..2dd047eec94
--- /dev/null
+++ b/src/main/kotlin/net/ccbluex/liquidbounce/config/gson/adapter/FrontendSlotPreferenceAdapter.kt
@@ -0,0 +1,46 @@
+@file:Suppress("WildcardImport")
+
+package net.ccbluex.liquidbounce.config.gson.adapter
+
+import com.google.gson.*
+import net.ccbluex.liquidbounce.features.inventoryPreset.FrontendSlotPreference
+import net.ccbluex.liquidbounce.features.inventoryPreset.FrontendSlotPreference.GroupSlotPreference.ItemGroupType
+import net.minecraft.item.Item
+import java.lang.reflect.Type
+
+object FrontendSlotPreferenceAdapter :
+ JsonSerializer
+ {searchQuery === "" ? "Select Items" : "Search"}
+
+
+ {#if searchQuery === ""}
+
+ Quick Select
+
+ {/if}
+
+ {#each commonItems as commonItem}
+
+ setItemProxy(commonItem)}>
+
+ {/each}
+
+
+
+ Specific Items
+
+
+ {#if searchQuery === ""}
+
+ await setTyping(true)}
+ on:focusout={async () => await setTyping(false)}
+ spellcheck="false">
+
+
+
+ 
+
+
+
+ Item Groups
+ {:else}
+ {#if renderedItems.length > 0}
+
+
+
+
+ setItemProxy(item.item)}>
+
+
+
+ {$spaceSeperatedNames ? convertToSpacedString(item.name) : item.name}
+ {#if item.tooltip != null}
+
+
+
+
+
+
+ {:else}
+ No Results
+ {/if}
+ {/if}
+ setItemProxy({type: "SINGLE", item: item.identifier})}>
+
+
+ 
+
+
+
+ {item.name}
+
+