From e53bb1fb4a3df88d11e642b70db64a0c3452413d Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 22:18:02 +0200
Subject: [PATCH 01/11] Format clickgui

---
 src-theme/src/routes/clickgui/ClickGui.svelte | 100 ++++++++++--------
 1 file changed, 57 insertions(+), 43 deletions(-)

diff --git a/src-theme/src/routes/clickgui/ClickGui.svelte b/src-theme/src/routes/clickgui/ClickGui.svelte
index 4b712649c43..552d46dea11 100644
--- a/src-theme/src/routes/clickgui/ClickGui.svelte
+++ b/src-theme/src/routes/clickgui/ClickGui.svelte
@@ -1,50 +1,64 @@
 <script lang="ts">
-    import {onMount} from "svelte";
-    import {getComponents, getGameWindow, getModules, getModuleSettings} from "../../integration/rest";
-    import {groupByCategory} from "../../integration/util";
-    import type {GroupedModules, Module} from "../../integration/types";
-    import Panel from "./Panel.svelte";
-    import Search from "./Search.svelte";
-    import Description from "./Description.svelte";
-    import {fade} from "svelte/transition";
-    import {listen} from "../../integration/ws";
-    import type {ClickGuiScaleChangeEvent, ScaleFactorChangeEvent} from "../../integration/events";
-
-    let categories: GroupedModules = {};
-    let modules: Module[] = [];
-    let minecraftScaleFactor = 2;
-    let clickGuiScaleFactor = 1;
-    $: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
-    $: zoom = scaleFactor * 50;
-
-    onMount(async () => {
-        const gameWindow = await getGameWindow();
-        minecraftScaleFactor = gameWindow.scaleFactor;
-
-        modules = await getModules();
-        categories = groupByCategory(modules);
-
-        const clickGuiSettings = await getModuleSettings("ClickGUI");
-        clickGuiScaleFactor = clickGuiSettings.value.find(v => v.name === "Scale")?.value as number ?? 1
-    });
-
-    listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
-        minecraftScaleFactor = e.scaleFactor;
-    });
-
-    listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
-        clickGuiScaleFactor = e.value;
-    });
+  import { onMount } from "svelte";
+  import {
+    getGameWindow,
+    getModules,
+    getModuleSettings,
+  } from "../../integration/rest";
+  import { groupByCategory } from "../../integration/util";
+  import type { GroupedModules, Module } from "../../integration/types";
+  import Panel from "./Panel.svelte";
+  import Search from "./Search.svelte";
+  import Description from "./Description.svelte";
+  import { fade } from "svelte/transition";
+  import { listen } from "../../integration/ws";
+  import type {
+    ClickGuiScaleChangeEvent,
+    ScaleFactorChangeEvent,
+  } from "../../integration/events";
+
+  let categories: GroupedModules = {};
+  let modules: Module[] = [];
+  let minecraftScaleFactor = 2;
+  let clickGuiScaleFactor = 1;
+  $: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
+  $: zoom = scaleFactor * 50;
+
+  onMount(async () => {
+    const gameWindow = await getGameWindow();
+    minecraftScaleFactor = gameWindow.scaleFactor;
+
+    modules = await getModules();
+    categories = groupByCategory(modules);
+
+    const clickGuiSettings = await getModuleSettings("ClickGUI");
+    clickGuiScaleFactor =
+      (clickGuiSettings.value.find((v) => v.name === "Scale")
+        ?.value as number) ?? 1;
+  });
+
+  listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
+    minecraftScaleFactor = e.scaleFactor;
+  });
+
+  listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
+    clickGuiScaleFactor = e.value;
+  });
 </script>
 
-<div class="clickgui" transition:fade|global={{duration: 200}}
-     style="zoom: {zoom}%; width: {2 / scaleFactor * 100}vw; height: {2 / scaleFactor * 100}vh;">
-    <Description/>
-    <Search modules={structuredClone(modules)}/>
+<div
+  class="clickgui"
+  transition:fade|global={{ duration: 200 }}
+  style="zoom: {zoom}%; width: {(2 / scaleFactor) * 100}vw; height: {(2 /
+    scaleFactor) *
+    100}vh;"
+>
+  <Description />
+  <Search modules={structuredClone(modules)} />
 
-    {#each Object.entries(categories) as [category, modules], panelIndex}
-        <Panel {category} {modules} {panelIndex} {scaleFactor}/>
-    {/each}
+  {#each Object.entries(categories) as [category, modules], panelIndex}
+    <Panel {category} {modules} {panelIndex} {scaleFactor} />
+  {/each}
 </div>
 
 <style lang="scss">

From 97755a5a45ccc259f6ce505c9fe91fced82ff6a5 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 22:18:10 +0200
Subject: [PATCH 02/11] Create ClickGuiTabs.svelte

---
 .../src/routes/clickgui/ClickGuiTabs.svelte   | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src-theme/src/routes/clickgui/ClickGuiTabs.svelte

diff --git a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
new file mode 100644
index 00000000000..12a45c22360
--- /dev/null
+++ b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  const tabs = ["Modules", "Hud", "Settings", "Friends"];
+</script>
+
+<div class="tabs"></div>
+
+<style lang="scss">
+  @import "../../colors.scss";
+
+  .tabs {
+    position: fixed;
+    left: 50%;
+    top: 25px;
+    transform: translateX(-50%);
+    background-color: rgba($clickgui-base-color, 0.9);
+    width: 600px;
+    border-radius: 30px;
+    overflow: hidden;
+    box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);
+
+    &:focus-within {
+      z-index: 9999999999;
+    }
+  }
+</style>

From 1508827b026a335c29e1a9d9bf953de001b18a0c Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 22:24:01 +0200
Subject: [PATCH 03/11] Format search

---
 src-theme/src/routes/clickgui/Search.svelte | 289 +++++++++++---------
 1 file changed, 154 insertions(+), 135 deletions(-)

diff --git a/src-theme/src/routes/clickgui/Search.svelte b/src-theme/src/routes/clickgui/Search.svelte
index f6eb0d28694..fa9966acc4f 100644
--- a/src-theme/src/routes/clickgui/Search.svelte
+++ b/src-theme/src/routes/clickgui/Search.svelte
@@ -1,161 +1,180 @@
 <script lang="ts">
-    import type {Module} from "../../integration/types";
-    import {setModuleEnabled} from "../../integration/rest";
-    import {listen} from "../../integration/ws";
-    import type {KeyboardKeyEvent, ToggleModuleEvent} from "../../integration/events";
-    import {highlightModuleName} from "./clickgui_store";
-    import {onMount} from "svelte";
-    import {convertToSpacedString, spaceSeperatedNames} from "../../theme/theme_config";
-
-    export let modules: Module[];
-
-    let resultElements: HTMLElement[] = [];
-    let searchContainerElement: HTMLElement;
-    let searchInputElement: HTMLElement;
-    let query: string;
-    let filteredModules: Module[] = [];
-    let selectedIndex = 0;
-
-    function reset() {
-        filteredModules = [];
-        query = "";
-        $highlightModuleName = null;
-    }
+  import type { Module } from "../../integration/types";
+  import { setModuleEnabled } from "../../integration/rest";
+  import { listen } from "../../integration/ws";
+  import type {
+    KeyboardKeyEvent,
+    ToggleModuleEvent,
+  } from "../../integration/events";
+  import { highlightModuleName } from "./clickgui_store";
+  import { onMount } from "svelte";
+  import {
+    convertToSpacedString,
+    spaceSeperatedNames,
+  } from "../../theme/theme_config";
+
+  export let modules: Module[];
+
+  let resultElements: HTMLElement[] = [];
+  let searchContainerElement: HTMLElement;
+  let searchInputElement: HTMLElement;
+  let query: string;
+  let filteredModules: Module[] = [];
+  let selectedIndex = 0;
+
+  function reset() {
+    filteredModules = [];
+    query = "";
+    $highlightModuleName = null;
+  }
 
-    function filterModules() {
-        if (!query) {
-            reset();
-            return;
-        }
+  function filterModules() {
+    if (!query) {
+      reset();
+      return;
+    }
 
-        selectedIndex = 0;
+    selectedIndex = 0;
+
+    filteredModules = modules.filter(
+      (m) =>
+        m.name
+          .toLowerCase()
+          .includes(query.toLowerCase().replaceAll(" ", "")) ||
+        m.aliases.some((a) =>
+          a.toLowerCase().includes(query.toLowerCase().replaceAll(" ", "")),
+        ),
+    );
+  }
 
-        filteredModules = modules.filter((m) => m.name.toLowerCase().includes(query.toLowerCase().replaceAll(" ", ""))
-            || m.aliases.some(a => a.toLowerCase().includes(query.toLowerCase().replaceAll(" ", "")))
-        );
+  async function handleKeyDown(e: KeyboardKeyEvent) {
+    if (filteredModules.length === 0 || e.action === 0) {
+      return;
     }
 
-    async function handleKeyDown(e: KeyboardKeyEvent) {
-        if (filteredModules.length === 0 || e.action === 0) {
-            return;
+    switch (e.keyCode) {
+      case 264:
+        selectedIndex = (selectedIndex + 1) % filteredModules.length;
+        break;
+      case 265:
+        selectedIndex =
+          (selectedIndex - 1 + filteredModules.length) % filteredModules.length;
+        break;
+      case 257:
+        await toggleModule(
+          filteredModules[selectedIndex].name,
+          !filteredModules[selectedIndex].enabled,
+        );
+        break;
+      case 258:
+        const m = filteredModules[selectedIndex]?.name;
+        if (m) {
+          $highlightModuleName = m;
         }
+        break;
+    }
 
-        switch (e.keyCode) {
-            case 264:
-                selectedIndex = (selectedIndex + 1) % filteredModules.length;
-                break;
-            case 265:
-                selectedIndex =
-                    (selectedIndex - 1 + filteredModules.length) %
-                    filteredModules.length;
-                break;
-            case 257:
-                await toggleModule(
-                    filteredModules[selectedIndex].name,
-                    !filteredModules[selectedIndex].enabled,
-                );
-                break;
-            case 258:
-                const m = filteredModules[selectedIndex]?.name;
-                if (m) {
-                    $highlightModuleName = m;
-                }
-                break;
-        }
+    resultElements[selectedIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }
 
-        resultElements[selectedIndex]?.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-        });
+  function handleBrowserKeyDown(e: KeyboardEvent) {
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Tab") {
+      e.preventDefault();
     }
+  }
 
-    function handleBrowserKeyDown(e: KeyboardEvent) {
-        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Tab") {
-            e.preventDefault();
-        }
-    }
+  async function toggleModule(name: string, enabled: boolean) {
+    await setModuleEnabled(name, enabled);
+  }
 
-    async function toggleModule(name: string, enabled: boolean) {
-        await setModuleEnabled(name, enabled);
+  function handleWindowClick(e: MouseEvent) {
+    if (!searchContainerElement.contains(e.target as Node)) {
+      reset();
     }
+  }
 
-    function handleWindowClick(e: MouseEvent) {
-        if (!searchContainerElement.contains(e.target as Node)) {
-            reset();
-        }
+  function handleWindowKeyDown() {
+    if (document.activeElement !== document.body) {
+      return;
     }
 
-    function handleWindowKeyDown() {
-        if (document.activeElement !== document.body) {
-            return;
-        }
-
-        searchInputElement.focus();
-    }
+    searchInputElement.focus();
+  }
 
-    onMount(() => {
-        searchInputElement.focus();
-    });
+  onMount(() => {
+    searchInputElement.focus();
+  });
 
-    listen("toggleModule", (e: ToggleModuleEvent) => {
-        const mod = filteredModules.find((m) => m.name === e.moduleName);
-        if (!mod) {
-            return;
-        }
-        mod.enabled = e.enabled;
-        filteredModules = filteredModules;
-    });
+  listen("toggleModule", (e: ToggleModuleEvent) => {
+    const mod = filteredModules.find((m) => m.name === e.moduleName);
+    if (!mod) {
+      return;
+    }
+    mod.enabled = e.enabled;
+    filteredModules = filteredModules;
+  });
 
-    listen("keyboardKey", handleKeyDown);
+  listen("keyboardKey", handleKeyDown);
 </script>
 
-<svelte:window on:click={handleWindowClick} on:keydown={handleWindowKeyDown} on:contextmenu={handleWindowClick}/>
+<svelte:window
+  on:click={handleWindowClick}
+  on:keydown={handleWindowKeyDown}
+  on:contextmenu={handleWindowClick}
+/>
 
 <div
-        class="search"
-        class:has-results={query}
-        bind:this={searchContainerElement}
+  class="search"
+  class:has-results={query}
+  bind:this={searchContainerElement}
 >
-    <input
-            type="text"
-            class="search-input"
-            placeholder="Search"
-            spellcheck="false"
-            bind:value={query}
-            bind:this={searchInputElement}
-            on:input={filterModules}
-            on:keydown={handleBrowserKeyDown}
-    />
-
-    {#if query}
-        <div class="results">
-            {#if filteredModules.length > 0}
-                {#each filteredModules as {name, enabled, aliases}, index (name)}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <!-- svelte-ignore a11y-no-static-element-interactions -->
-                    <div
-                            class="result"
-                            class:enabled
-                            on:click={() => toggleModule(name, !enabled)}
-                            on:contextmenu|preventDefault={() => $highlightModuleName = name}
-                            class:selected={selectedIndex === index}
-                            bind:this={resultElements[index]}
-                    >
-                        <div class="module-name">
-                            {$spaceSeperatedNames ? convertToSpacedString(name) : name}
-                        </div>
-                        <div class="aliases">
-                            {#if aliases.length > 0}
-                                (aka {aliases.map(a => $spaceSeperatedNames ? convertToSpacedString(a) : a).join(", ")})
-                            {/if}
-                        </div>
-                    </div>
-                {/each}
-            {:else}
-                <div class="placeholder">No modules found</div>
-            {/if}
-        </div>
-    {/if}
+  <input
+    type="text"
+    class="search-input"
+    placeholder="Search"
+    spellcheck="false"
+    bind:value={query}
+    bind:this={searchInputElement}
+    on:input={filterModules}
+    on:keydown={handleBrowserKeyDown}
+  />
+
+  {#if query}
+    <div class="results">
+      {#if filteredModules.length > 0}
+        {#each filteredModules as { name, enabled, aliases }, index (name)}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <!-- svelte-ignore a11y-no-static-element-interactions -->
+          <div
+            class="result"
+            class:enabled
+            on:click={() => toggleModule(name, !enabled)}
+            on:contextmenu|preventDefault={() => ($highlightModuleName = name)}
+            class:selected={selectedIndex === index}
+            bind:this={resultElements[index]}
+          >
+            <div class="module-name">
+              {$spaceSeperatedNames ? convertToSpacedString(name) : name}
+            </div>
+            <div class="aliases">
+              {#if aliases.length > 0}
+                (aka {aliases
+                  .map((a) =>
+                    $spaceSeperatedNames ? convertToSpacedString(a) : a,
+                  )
+                  .join(", ")})
+              {/if}
+            </div>
+          </div>
+        {/each}
+      {:else}
+        <div class="placeholder">No modules found</div>
+      {/if}
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -201,7 +220,7 @@
       }
 
       .aliases {
-        color: rgba($clickgui-text-dimmed-color, .6);
+        color: rgba($clickgui-text-dimmed-color, 0.6);
         margin-left: 10px;
       }
 

From 8ce4a5e87bfd2d2f113a79fa1611072cc3d14a12 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 22:24:11 +0200
Subject: [PATCH 04/11] Adds tabs to clickgui

---
 src-theme/src/routes/clickgui/ClickGui.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src-theme/src/routes/clickgui/ClickGui.svelte b/src-theme/src/routes/clickgui/ClickGui.svelte
index 552d46dea11..f1f30acc171 100644
--- a/src-theme/src/routes/clickgui/ClickGui.svelte
+++ b/src-theme/src/routes/clickgui/ClickGui.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import ClickGuiTabs from "./ClickGuiTabs.svelte";
   import { onMount } from "svelte";
   import {
     getGameWindow,
@@ -54,6 +55,7 @@
     100}vh;"
 >
   <Description />
+  <ClickGuiTabs />
   <Search modules={structuredClone(modules)} />
 
   {#each Object.entries(categories) as [category, modules], panelIndex}

From e02c4a60256a830a4afb1ed6716e340f6591c6d4 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 23:15:01 +0200
Subject: [PATCH 05/11] Move search down

---
 src-theme/src/routes/clickgui/Search.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-theme/src/routes/clickgui/Search.svelte b/src-theme/src/routes/clickgui/Search.svelte
index fa9966acc4f..8cd7ca41cd6 100644
--- a/src-theme/src/routes/clickgui/Search.svelte
+++ b/src-theme/src/routes/clickgui/Search.svelte
@@ -183,7 +183,7 @@
   .search {
     position: fixed;
     left: 50%;
-    top: 50px;
+    top: 70px;
     transform: translateX(-50%);
     background-color: rgba($clickgui-base-color, 0.9);
     width: 600px;

From f531d25373c90e168866e1191c6e60555c5f2af0 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 23:15:13 +0200
Subject: [PATCH 06/11] First version ClickGuiTabs

---
 .../src/routes/clickgui/ClickGuiTabs.svelte   | 55 +++++++++++++++++--
 1 file changed, 49 insertions(+), 6 deletions(-)

diff --git a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
index 12a45c22360..358544502e1 100644
--- a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
+++ b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
@@ -1,25 +1,68 @@
 <script lang="ts">
   const tabs = ["Modules", "Hud", "Settings", "Friends"];
+
+  let activeTab = tabs[0];
 </script>
 
-<div class="tabs"></div>
+<div class="tabs">
+  {#each tabs as tab}
+    <button
+      class="tab"
+      class:active={tab == activeTab}
+      on:click={() => (activeTab = tab)}
+    >
+      {tab}
+    </button>
+  {/each}
+</div>
 
 <style lang="scss">
+  @use "sass:color";
   @import "../../colors.scss";
 
   .tabs {
     position: fixed;
+    display: flex;
     left: 50%;
-    top: 25px;
+    top: 0;
+    border-radius: 0 0 20px 20px;
     transform: translateX(-50%);
-    background-color: rgba($clickgui-base-color, 0.9);
-    width: 600px;
-    border-radius: 30px;
+    // width: 600px;
+
+    background-color: rgba($clickgui-base-color, 0.8);
+    // border-radius: 30px;
+
     overflow: hidden;
-    box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);
+    // box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);
 
     &:focus-within {
       z-index: 9999999999;
     }
   }
+
+  .tab {
+    background-color: transparent;
+    color: $clickgui-text-dimmed-color;
+    border: none;
+    font-size: 16px;
+    font-family: inherit;
+    padding: 12px 30px;
+
+    &.active {
+      background-color: color.scale($clickgui-base-color, $lightness: 15%);
+      color: $clickgui-text-color;
+      position: relative;
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: -1px;
+
+        height: 3px;
+        background-color: $accent-color;
+      }
+    }
+  }
 </style>

From 03b648c2fab55204eab0516e07f0b2dc0ee10e3e Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 23:22:14 +0200
Subject: [PATCH 07/11] New tabs lok

---
 .../src/routes/clickgui/ClickGuiTabs.svelte   | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
index 358544502e1..24be4e8296b 100644
--- a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
+++ b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
@@ -24,15 +24,14 @@
     position: fixed;
     display: flex;
     left: 50%;
-    top: 0;
-    border-radius: 0 0 20px 20px;
+    top: 14px;
+    gap: 15px;
     transform: translateX(-50%);
-    // width: 600px;
+    width: 600px;
 
-    background-color: rgba($clickgui-base-color, 0.8);
     // border-radius: 30px;
 
-    overflow: hidden;
+    // overflow: hidden;
     // box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);
 
     &:focus-within {
@@ -47,22 +46,14 @@
     font-size: 16px;
     font-family: inherit;
     padding: 12px 30px;
+    flex: 1;
+    border-radius: 30px;
 
+    background-color: rgba($clickgui-base-color, 0.8);
     &.active {
-      background-color: color.scale($clickgui-base-color, $lightness: 15%);
       color: $clickgui-text-color;
-      position: relative;
-      &::after {
-        content: "";
-        display: block;
-        position: absolute;
-        right: 0;
-        left: 0;
-        top: -1px;
-
-        height: 3px;
-        background-color: $accent-color;
-      }
+      // border: 2px solid $accent-color;
+      outline: 3px solid $accent-color;
     }
   }
 </style>

From 1ea517f317d63418486e5cdeb155e09c1c621292 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 23:58:06 +0200
Subject: [PATCH 08/11] Move files around

---
 src-theme/src/App.svelte                      | 160 +++++-----
 src-theme/src/routes/clickgui/+layout.svelte  |  66 ++++
 src-theme/src/routes/clickgui/ClickGui.svelte |  33 +-
 .../src/routes/clickgui/ClickGuiTabs.svelte   |   4 +-
 .../src/routes/clickgui/Description.svelte    |  58 ----
 src-theme/src/routes/clickgui/Module.svelte   | 183 -----------
 src-theme/src/routes/clickgui/Panel.svelte    | 286 -----------------
 .../clickgui/modules/Description.svelte       |  61 ++++
 .../src/routes/clickgui/modules/Module.svelte | 198 ++++++++++++
 .../routes/clickgui/modules/Modules.svelte    |  23 ++
 .../src/routes/clickgui/modules/Panel.svelte  | 295 ++++++++++++++++++
 11 files changed, 737 insertions(+), 630 deletions(-)
 create mode 100644 src-theme/src/routes/clickgui/+layout.svelte
 delete mode 100644 src-theme/src/routes/clickgui/Description.svelte
 delete mode 100644 src-theme/src/routes/clickgui/Module.svelte
 delete mode 100644 src-theme/src/routes/clickgui/Panel.svelte
 create mode 100644 src-theme/src/routes/clickgui/modules/Description.svelte
 create mode 100644 src-theme/src/routes/clickgui/modules/Module.svelte
 create mode 100644 src-theme/src/routes/clickgui/modules/Modules.svelte
 create mode 100644 src-theme/src/routes/clickgui/modules/Panel.svelte

diff --git a/src-theme/src/App.svelte b/src-theme/src/App.svelte
index 458e342aeb0..c9752fcbfe9 100644
--- a/src-theme/src/App.svelte
+++ b/src-theme/src/App.svelte
@@ -1,96 +1,96 @@
 <script lang="ts">
-    import Router, {push} from "svelte-spa-router";
-    import ClickGui from "./routes/clickgui/ClickGui.svelte";
-    import Hud from "./routes/hud/Hud.svelte";
-    import {getVirtualScreen} from "./integration/rest";
-    import {cleanupListeners, listenAlways} from "./integration/ws";
-    import {onMount} from "svelte";
-    import {insertPersistentData} from "./integration/persistent_storage";
-    import Inventory from "./routes/inventory/Inventory.svelte";
-    import Title from "./routes/menu/title/Title.svelte";
-    import SplashScreen from "./routes/menu/splash/SplashScreen.svelte";
-    import Multiplayer from "./routes/menu/multiplayer/Multiplayer.svelte";
-    import AltManager from "./routes/menu/altmanager/AltManager.svelte";
-    import Singleplayer from "./routes/menu/singleplayer/Singleplayer.svelte";
-    import ProxyManager from "./routes/menu/proxymanager/ProxyManager.svelte";
-    import None from "./routes/none/None.svelte";
-    import Disconnected from "./routes/menu/disconnected/Disconnected.svelte";
+  import Router, { push } from "svelte-spa-router";
+  import ClickGui from "./routes/clickgui/ClickGui.svelte";
+  import Hud from "./routes/hud/Hud.svelte";
+  import { getVirtualScreen } from "./integration/rest";
+  import { cleanupListeners, listenAlways } from "./integration/ws";
+  import { onMount } from "svelte";
+  import { insertPersistentData } from "./integration/persistent_storage";
+  import Inventory from "./routes/inventory/Inventory.svelte";
+  import Title from "./routes/menu/title/Title.svelte";
+  import SplashScreen from "./routes/menu/splash/SplashScreen.svelte";
+  import Multiplayer from "./routes/menu/multiplayer/Multiplayer.svelte";
+  import AltManager from "./routes/menu/altmanager/AltManager.svelte";
+  import Singleplayer from "./routes/menu/singleplayer/Singleplayer.svelte";
+  import ProxyManager from "./routes/menu/proxymanager/ProxyManager.svelte";
+  import None from "./routes/none/None.svelte";
+  import Disconnected from "./routes/menu/disconnected/Disconnected.svelte";
 
-    const routes = {
-        "/clickgui": ClickGui,
-        "/hud": Hud,
-        "/inventory": Inventory,
-        "/title": Title,
-        "/splash": SplashScreen,
-        "/multiplayer": Multiplayer,
-        "/altmanager": AltManager,
-        "/singleplayer": Singleplayer,
-        "/proxymanager": ProxyManager,
-        "/none": None,
-        "/disconnected": Disconnected
-    };
+  const routes = {
+    "/clickgui": ClickGui,
+    "/hud": Hud,
+    "/inventory": Inventory,
+    "/title": Title,
+    "/splash": SplashScreen,
+    "/multiplayer": Multiplayer,
+    "/altmanager": AltManager,
+    "/singleplayer": Singleplayer,
+    "/proxymanager": ProxyManager,
+    "/none": None,
+    "/disconnected": Disconnected,
+  };
 
-    const url = window.location.href;
-    const staticTag = url.split("?")[1];
-    const isStatic = staticTag === "static";
-    let showSplash = false;
+  const url = window.location.href;
+  const staticTag = url.split("?")[1];
+  const isStatic = staticTag === "static";
+  let showSplash = false;
 
-    // HACK: Just in case
-    setTimeout(() => {
-       showSplash = false;
-    }, 10 * 1000);
+  // HACK: Just in case
+  setTimeout(() => {
+    showSplash = false;
+  }, 10 * 1000);
 
-    async function changeRoute(name: string) {
-        cleanupListeners();
-        console.log(`[Router] Redirecting to ${name}`);
-        await push(`/${name}`);
-    }
-
-    onMount(async () => {
-        await insertPersistentData();
+  async function changeRoute(name: string) {
+    cleanupListeners();
+    console.log(`[Router] Redirecting to ${name}`);
+    await push(`/${name}`);
+  }
 
-        if (isStatic) {
-            return;
-        }
+  onMount(async () => {
+    await insertPersistentData();
 
-        listenAlways("socketReady", async () => {
-            const virtualScreen = await getVirtualScreen();
-            showSplash = virtualScreen.showingSplash;
-            await changeRoute(virtualScreen.name || "none");
-        });
+    if (isStatic) {
+      return;
+    }
 
-        listenAlways("splashOverlay", async (event: any) => {
-            showSplash = event.showingSplash;
-            if (!showSplash) {
-                // Dirty fix to patch lagging browser after launch.
-                window.location.replace(window.location.href.split("#").shift()!);
-            }
-        });
+    listenAlways("socketReady", async () => {
+      const virtualScreen = await getVirtualScreen();
+      showSplash = virtualScreen.showingSplash;
+      await changeRoute(virtualScreen.name || "none");
+    });
 
-        listenAlways("virtualScreen", async (event: any) => {
-            console.log(`[Router] Virtual screen change to ${event.screenName}`);
-            const action = event.action;
+    listenAlways("splashOverlay", async (event: any) => {
+      showSplash = event.showingSplash;
+      if (!showSplash) {
+        // Dirty fix to patch lagging browser after launch.
+        window.location.replace(window.location.href.split("#").shift()!);
+      }
+    });
 
-            switch (action) {
-                case "close":
-                    await changeRoute("none");
-                    break;
-                case "open":
-                    await changeRoute(event.screenName || "none");
-                    break;
-            }
-        });
+    listenAlways("virtualScreen", async (event: any) => {
+      console.log(`[Router] Virtual screen change to ${event.screenName}`);
+      const action = event.action;
 
-        const virtualScreen = await getVirtualScreen();
-        showSplash = virtualScreen.showingSplash;
-        await changeRoute(virtualScreen.name || "none");
+      switch (action) {
+        case "close":
+          await changeRoute("none");
+          break;
+        case "open":
+          await changeRoute(event.screenName || "none");
+          break;
+      }
     });
+
+    const virtualScreen = await getVirtualScreen();
+    showSplash = virtualScreen.showingSplash;
+    await changeRoute(virtualScreen.name || "none");
+  });
 </script>
 
 <main>
-    {#if showSplash}
-        <SplashScreen/>
-    {:else}
-        <Router {routes}/>
-    {/if}
+  {#if showSplash}
+    <SplashScreen />
+  {:else}
+    <Router {routes} />
+  {/if}
 </main>
diff --git a/src-theme/src/routes/clickgui/+layout.svelte b/src-theme/src/routes/clickgui/+layout.svelte
new file mode 100644
index 00000000000..423384f2345
--- /dev/null
+++ b/src-theme/src/routes/clickgui/+layout.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import ClickGuiTabs from "./ClickGuiTabs.svelte";
+  import { onMount } from "svelte";
+  import {
+    getGameWindow,
+    getModules,
+    getModuleSettings,
+  } from "../../integration/rest";
+  import { groupByCategory } from "../../integration/util";
+  import type { GroupedModules, Module } from "../../integration/types";
+  import Panel from "./Panel.svelte";
+  import Search from "./Search.svelte";
+  import Description from "./modules/Description.svelte";
+  import { fade } from "svelte/transition";
+  import { listen } from "../../integration/ws";
+  import type {
+    ClickGuiScaleChangeEvent,
+    ScaleFactorChangeEvent,
+  } from "../../integration/events";
+
+  let minecraftScaleFactor = 2;
+  let clickGuiScaleFactor = 1;
+  $: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
+  $: zoom = scaleFactor * 50;
+
+  onMount(async () => {
+    const gameWindow = await getGameWindow();
+    minecraftScaleFactor = gameWindow.scaleFactor;
+
+    const clickGuiSettings = await getModuleSettings("ClickGUI");
+    clickGuiScaleFactor =
+      (clickGuiSettings.value.find((v) => v.name === "Scale")
+        ?.value as number) ?? 1;
+  });
+
+  listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
+    minecraftScaleFactor = e.scaleFactor;
+  });
+
+  listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
+    clickGuiScaleFactor = e.value;
+  });
+</script>
+
+<div
+  class="clickgui"
+  transition:fade|global={{ duration: 200 }}
+  style="zoom: {zoom}%; width: {(2 / scaleFactor) * 100}vw; height: {(2 /
+    scaleFactor) *
+    100}vh;"
+>
+  <Description />
+  <ClickGuiTabs />
+  <slot></slot>
+</div>
+
+<style lang="scss">
+  @import "../../colors.scss";
+
+  .clickgui {
+    background-color: rgba($clickgui-base-color, 0.6);
+    overflow: hidden;
+    position: relative;
+    will-change: opacity;
+  }
+</style>
diff --git a/src-theme/src/routes/clickgui/ClickGui.svelte b/src-theme/src/routes/clickgui/ClickGui.svelte
index f1f30acc171..158a9ad8b79 100644
--- a/src-theme/src/routes/clickgui/ClickGui.svelte
+++ b/src-theme/src/routes/clickgui/ClickGui.svelte
@@ -1,25 +1,16 @@
 <script lang="ts">
   import ClickGuiTabs from "./ClickGuiTabs.svelte";
   import { onMount } from "svelte";
-  import {
-    getGameWindow,
-    getModules,
-    getModuleSettings,
-  } from "../../integration/rest";
-  import { groupByCategory } from "../../integration/util";
-  import type { GroupedModules, Module } from "../../integration/types";
-  import Panel from "./Panel.svelte";
-  import Search from "./Search.svelte";
-  import Description from "./Description.svelte";
+  import { getGameWindow, getModuleSettings } from "../../integration/rest";
+  import Description from "./modules/Description.svelte";
   import { fade } from "svelte/transition";
   import { listen } from "../../integration/ws";
   import type {
     ClickGuiScaleChangeEvent,
     ScaleFactorChangeEvent,
   } from "../../integration/events";
+  import Modules from "./modules/Modules.svelte";
 
-  let categories: GroupedModules = {};
-  let modules: Module[] = [];
   let minecraftScaleFactor = 2;
   let clickGuiScaleFactor = 1;
   $: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
@@ -29,9 +20,6 @@
     const gameWindow = await getGameWindow();
     minecraftScaleFactor = gameWindow.scaleFactor;
 
-    modules = await getModules();
-    categories = groupByCategory(modules);
-
     const clickGuiSettings = await getModuleSettings("ClickGUI");
     clickGuiScaleFactor =
       (clickGuiSettings.value.find((v) => v.name === "Scale")
@@ -45,6 +33,8 @@
   listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
     clickGuiScaleFactor = e.value;
   });
+
+  let activeTab: string;
 </script>
 
 <div
@@ -55,12 +45,13 @@
     100}vh;"
 >
   <Description />
-  <ClickGuiTabs />
-  <Search modules={structuredClone(modules)} />
-
-  {#each Object.entries(categories) as [category, modules], panelIndex}
-    <Panel {category} {modules} {panelIndex} {scaleFactor} />
-  {/each}
+  <ClickGuiTabs bind:activeTab />
+  {#if activeTab === "Modules"}
+    <Modules {scaleFactor} />
+  {:else if activeTab === "Settings"}
+    settings
+  {/if}
+  <slot></slot>
 </div>
 
 <style lang="scss">
diff --git a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
index 24be4e8296b..76aca97b48a 100644
--- a/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
+++ b/src-theme/src/routes/clickgui/ClickGuiTabs.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   const tabs = ["Modules", "Hud", "Settings", "Friends"];
 
-  let activeTab = tabs[0];
+  export let activeTab: string = tabs[0];
 </script>
 
 <div class="tabs">
@@ -53,7 +53,7 @@
     &.active {
       color: $clickgui-text-color;
       // border: 2px solid $accent-color;
-      outline: 3px solid $accent-color;
+      outline: 2px solid $accent-color;
     }
   }
 </style>
diff --git a/src-theme/src/routes/clickgui/Description.svelte b/src-theme/src/routes/clickgui/Description.svelte
deleted file mode 100644
index 3919e435e14..00000000000
--- a/src-theme/src/routes/clickgui/Description.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<script lang="ts">
-    import {fly} from "svelte/transition";
-    import {description, type TDescription} from "./clickgui_store";
-
-    let data: TDescription | null = null;
-
-    description.subscribe((v) => {
-        data = v;
-    });
-</script>
-
-{#key data}
-    {#if data !== null}
-        <div transition:fly|global={{duration: 200, x: -15}} class="description-wrapper"
-             style="top: {data.y}px; left: {data.x + 20}px;">
-            <div class="description">
-                <div class="text">{data.description}</div>
-            </div>
-        </div>
-    {/if}
-{/key}
-
-<style lang="scss">
-  @import "../../colors.scss";
-
-  .description-wrapper {
-    position: fixed;
-    z-index: 999999999999;
-    transform: translateY(-50%);
-  }
-
-  .description {
-    position: relative;
-    border-radius: 5px;
-    background-color: rgba($clickgui-base-color, .9);
-    filter: drop-shadow(0 0 10px rgba($clickgui-base-color, 0.5));
-
-    &::before {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 0;
-      height: 0;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-      border-right: 8px solid rgba($clickgui-base-color, .9);
-      left: -8px;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-  }
-
-  .text {
-    font-size: 12px;
-    padding: 10px;
-    color: $clickgui-text-color;
-  }
-</style>
\ No newline at end of file
diff --git a/src-theme/src/routes/clickgui/Module.svelte b/src-theme/src/routes/clickgui/Module.svelte
deleted file mode 100644
index 1490e5d24fb..00000000000
--- a/src-theme/src/routes/clickgui/Module.svelte
+++ /dev/null
@@ -1,183 +0,0 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-    import {
-        getModuleSettings,
-        setModuleSettings,
-        setModuleEnabled,
-    } from "../../integration/rest";
-    import type {ConfigurableSetting} from "../../integration/types";
-    import GenericSetting from "./setting/common/GenericSetting.svelte";
-    import {slide} from "svelte/transition";
-    import {quintOut} from "svelte/easing";
-    import {description as descriptionStore, highlightModuleName} from "./clickgui_store";
-    import {setItem} from "../../integration/persistent_storage";
-    import {convertToSpacedString, spaceSeperatedNames} from "../../theme/theme_config";
-
-    export let name: string;
-    export let enabled: boolean;
-    export let description: string;
-    export let aliases: string[];
-
-    let moduleNameElement: HTMLElement;
-    let configurable: ConfigurableSetting;
-    const path = `clickgui.${name}`;
-    let expanded = false;
-
-    onMount(async () => {
-        configurable = await getModuleSettings(name);
-
-        setTimeout(() => {
-            expanded = localStorage.getItem(path) === "true"
-        }, 500);
-    });
-
-    highlightModuleName.subscribe(() => {
-        if (name !== $highlightModuleName) {
-            return;
-        }
-
-        setTimeout(() => {
-            if (!moduleNameElement) {
-                return;
-            }
-            moduleNameElement.scrollIntoView({
-                behavior: "smooth",
-                block: "center",
-            });
-        }, 1000);
-    });
-
-    async function updateModuleSettings() {
-        await setModuleSettings(name, configurable);
-        configurable = await getModuleSettings(name);
-    }
-
-    async function toggleModule() {
-        await setModuleEnabled(name, !enabled);
-    }
-
-    function setDescription() {
-        const y = (moduleNameElement?.getBoundingClientRect().top ?? 0) + ((moduleNameElement?.clientHeight ?? 0) / 2);
-        const x = moduleNameElement?.getBoundingClientRect().right ?? 0;
-        let moduleDescription = description;
-        if (aliases.length > 0) {
-            moduleDescription += ` (aka ${aliases.map(a => $spaceSeperatedNames ? convertToSpacedString(a) : a).join(", ")})`;
-        }
-        descriptionStore.set({
-            x,
-            y,
-            description: moduleDescription
-        });
-    }
-
-    async function toggleExpanded() {
-        expanded = !expanded;
-        await setItem(path, expanded.toString());
-    }
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-        class="module"
-        class:expanded
-        class:has-settings={configurable?.value.length > 2}
-        in:slide={{ duration: 500, easing: quintOut }}
-        out:slide={{ duration: 500, easing: quintOut }}
->
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-            class="name"
-            on:contextmenu|preventDefault={toggleExpanded}
-            on:click={toggleModule}
-            on:mouseenter={setDescription}
-            on:mouseleave={() => descriptionStore.set(null)}
-            bind:this={moduleNameElement}
-            class:enabled
-            class:highlight={name === $highlightModuleName}
-    >
-        {#if $spaceSeperatedNames}
-            {convertToSpacedString(name)}
-        {:else}
-            {name}
-        {/if}
-    </div>
-
-    {#if expanded && configurable}
-        <div class="settings">
-            {#each configurable.value as setting (setting.name)}
-                <GenericSetting skipAnimationDelay={true} {path} bind:setting on:change={updateModuleSettings}/>
-            {/each}
-        </div>
-    {/if}
-</div>
-
-<style lang="scss">
-  @import "../../colors.scss";
-
-  .module {
-    position: relative;
-
-    .name {
-      cursor: pointer;
-      transition: ease background-color 0.2s,
-      ease color 0.2s;
-
-      color: $clickgui-text-dimmed-color;
-      text-align: center;
-      font-size: 12px;
-      font-weight: 500;
-      position: relative;
-      padding: 10px;
-
-      &.highlight::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: calc(100% - 4px);
-        height: calc(100% - 4px);
-        border: solid 2px $accent-color;
-      }
-
-      &:hover {
-        background-color: rgba($clickgui-base-color, 0.85);
-        color: $clickgui-text-color;
-      }
-
-      &.enabled {
-        color: $accent-color;
-      }
-    }
-
-    .settings {
-      background-color: rgba($clickgui-base-color, 0.5);
-      border-left: solid 4px $accent-color;
-      padding: 0 11px 0 7px;
-    }
-
-    &.has-settings {
-      .name::after {
-        content: "";
-        display: block;
-        position: absolute;
-        height: 10px;
-        width: 10px;
-        right: 15px;
-        top: 50%;
-        background-image: url("/img/clickgui/icon-settings-expand.svg");
-        background-position: center;
-        background-repeat: no-repeat;
-        opacity: 0.5;
-        transform-origin: 50% 50%;
-        transform: translateY(-50%) rotate(-90deg);
-        transition: ease opacity 0.2s,
-        ease transform 0.4s;
-      }
-
-      &.expanded .name::after {
-        transform: translateY(-50%) rotate(0);
-        opacity: 1;
-      }
-    }
-  }
-</style>
diff --git a/src-theme/src/routes/clickgui/Panel.svelte b/src-theme/src/routes/clickgui/Panel.svelte
deleted file mode 100644
index 2607f50665e..00000000000
--- a/src-theme/src/routes/clickgui/Panel.svelte
+++ /dev/null
@@ -1,286 +0,0 @@
-<script lang="ts">
-    import {afterUpdate, onMount} from "svelte";
-    import type {Module as TModule} from "../../integration/types";
-    import {listen} from "../../integration/ws";
-    import Module from "./Module.svelte";
-    import type {ToggleModuleEvent} from "../../integration/events";
-    import {fly} from "svelte/transition";
-    import {quintOut} from "svelte/easing";
-    import {highlightModuleName, maxPanelZIndex} from "./clickgui_store";
-    import {setItem} from "../../integration/persistent_storage";
-
-    export let category: string;
-    export let modules: TModule[];
-    export let panelIndex: number;
-    export let scaleFactor: number;
-
-    let panelElement: HTMLElement;
-    let modulesElement: HTMLElement;
-
-    let renderedModules: TModule[] = [];
-
-    let moving = false;
-    let prevX = 0;
-    let prevY = 0;
-    const panelConfig = loadPanelConfig();
-
-    interface PanelConfig {
-        top: number;
-        left: number;
-        expanded: boolean;
-        scrollTop: number;
-        zIndex: number;
-    }
-
-    function clamp(number: number, min: number, max: number) {
-        return Math.max(min, Math.min(number, max));
-    }
-
-    function loadPanelConfig(): PanelConfig {
-        const localStorageItem = localStorage.getItem(
-            `clickgui.panel.${category}`,
-        );
-
-        if (!localStorageItem) {
-            return {
-                top: panelIndex * 50 + 20,
-                left: 20,
-                expanded: false,
-                scrollTop: 0,
-                zIndex: 0
-            };
-        } else {
-            const config: PanelConfig = JSON.parse(localStorageItem);
-
-            // Migration
-            if (!config.zIndex) {
-                config.zIndex = 0;
-            }
-
-            if (config.zIndex > $maxPanelZIndex) {
-                $maxPanelZIndex = config.zIndex;
-            }
-
-            if (config.expanded) {
-                renderedModules = modules;
-            }
-
-            return config;
-        }
-    }
-
-    async function savePanelConfig() {
-        await setItem(
-            `clickgui.panel.${category}`,
-            JSON.stringify(panelConfig),
-        );
-    }
-
-    function fixPosition() {
-        panelConfig.left = clamp(panelConfig.left, 0, document.documentElement.clientWidth * (2 / scaleFactor) - panelElement.offsetWidth);
-        panelConfig.top = clamp(panelConfig.top, 0, document.documentElement.clientHeight * (2 / scaleFactor) - panelElement.offsetHeight);
-    }
-
-    function onMouseDown() {
-        moving = true;
-
-        panelConfig.zIndex = ++$maxPanelZIndex;
-    }
-
-    function onMouseMove(e: MouseEvent) {
-        if (moving) {
-            panelConfig.left += (e.screenX - prevX) * (2 / scaleFactor);
-            panelConfig.top += (e.screenY - prevY) * (2 / scaleFactor);
-        }
-
-        prevX = e.screenX;
-        prevY = e.screenY;
-
-        fixPosition();
-        savePanelConfig();
-    }
-
-    function onMouseUp() {
-        moving = false;
-    }
-
-    function toggleExpanded() {
-        if (panelConfig.expanded) {
-            renderedModules = [];
-        } else {
-            renderedModules = modules;
-        }
-
-        panelConfig.expanded = !panelConfig.expanded;
-
-        setTimeout(() => {
-            fixPosition();
-            savePanelConfig();
-        }, 500);
-    }
-
-    function handleModulesScroll() {
-        panelConfig.scrollTop = modulesElement.scrollTop;
-        savePanelConfig();
-    }
-
-    highlightModuleName.subscribe(() => {
-        const highlightModule = modules.find(
-            (m) => m.name === $highlightModuleName,
-        );
-        if (highlightModule) {
-            panelConfig.zIndex = ++$maxPanelZIndex;
-            panelConfig.expanded = true;
-            renderedModules = modules;
-            savePanelConfig();
-        }
-    });
-
-    listen("toggleModule", (e: ToggleModuleEvent) => {
-        const moduleName = e.moduleName;
-        const moduleEnabled = e.enabled;
-
-        const mod = modules.find((m) => m.name === moduleName);
-        if (!mod) return;
-
-        mod.enabled = moduleEnabled;
-        modules = modules;
-        if (panelConfig.expanded) {
-            renderedModules = modules;
-        }
-    });
-
-    onMount(() => {
-        setTimeout(() => {
-            if (!modulesElement) {
-                return;
-            }
-
-            modulesElement.scrollTo({
-                top: panelConfig.scrollTop,
-                behavior: "smooth"
-            })
-        }, 500);
-    });
-</script>
-
-<svelte:window on:mouseup={onMouseUp} on:mousemove={onMouseMove}/>
-
-<div
-        class="panel"
-        style="left: {panelConfig.left}px; top: {panelConfig.top}px; z-index: {panelConfig.zIndex};"
-        bind:this={panelElement}
-        in:fly|global={{y: -30, duration: 200, easing: quintOut}}
-        out:fly|global={{y: -30, duration: 200, easing: quintOut}}
->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div
-            class="title"
-            on:mousedown={onMouseDown}
-            on:contextmenu|preventDefault={toggleExpanded}
-    >
-        <img
-                class="icon"
-                src="img/clickgui/icon-{category.toLowerCase()}.svg"
-                alt="icon"
-        />
-        <span class="category">{category}</span>
-
-        <button class="expand-toggle" on:click={toggleExpanded}>
-            <div class="icon" class:expanded={panelConfig.expanded}></div>
-        </button>
-    </div>
-
-    <div class="modules" on:scroll={handleModulesScroll} bind:this={modulesElement}>
-        {#each renderedModules as {name, enabled, description, aliases} (name)}
-            <Module {name} {enabled} {description} {aliases}/>
-        {/each}
-    </div>
-</div>
-
-<style lang="scss">
-  @import "../../colors.scss";
-
-  .panel {
-    border-radius: 5px;
-    width: 250px;
-    position: absolute;
-    overflow: hidden;
-    box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);
-    will-change: transform;
-  }
-
-  .title {
-    display: grid;
-    grid-template-columns: max-content 1fr max-content;
-    align-items: center;
-    column-gap: 12px;
-    background-color: rgba($clickgui-base-color, 0.9);
-    border-bottom: solid 2px $accent-color;
-    padding: 10px 15px;
-    cursor: grab;
-
-    .category {
-      font-size: 14px;
-      color: $clickgui-text-color;
-      font-weight: 500;
-    }
-  }
-
-  .modules {
-    max-height: 545px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background-color: rgba($clickgui-base-color, 0.8);
-  }
-
-  .modules::-webkit-scrollbar {
-    width: 0;
-  }
-
-  .expand-toggle {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-
-    .icon {
-      height: 12px;
-      width: 12px;
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        background-color: white;
-        transition: transform 0.4s ease-out;
-        top: 0;
-        left: 50%;
-        width: 2px;
-        height: 100%;
-        margin-left: -1px;
-      }
-
-      &::after {
-        content: "";
-        position: absolute;
-        background-color: white;
-        transition: transform 0.4s ease-out;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        height: 2px;
-        margin-top: -1px;
-      }
-
-      &.expanded {
-        &::before {
-          transform: rotate(90deg);
-        }
-
-        &::after {
-          transform: rotate(180deg);
-        }
-      }
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src-theme/src/routes/clickgui/modules/Description.svelte b/src-theme/src/routes/clickgui/modules/Description.svelte
new file mode 100644
index 00000000000..5d764f1aab1
--- /dev/null
+++ b/src-theme/src/routes/clickgui/modules/Description.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { description, type TDescription } from "../clickgui_store";
+
+  let data: TDescription | null = null;
+
+  description.subscribe((v) => {
+    data = v;
+  });
+</script>
+
+{#key data}
+  {#if data !== null}
+    <div
+      transition:fly|global={{ duration: 200, x: -15 }}
+      class="description-wrapper"
+      style="top: {data.y}px; left: {data.x + 20}px;"
+    >
+      <div class="description">
+        <div class="text">{data.description}</div>
+      </div>
+    </div>
+  {/if}
+{/key}
+
+<style lang="scss">
+  @import "../../../colors.scss";
+
+  .description-wrapper {
+    position: fixed;
+    z-index: 999999999999;
+    transform: translateY(-50%);
+  }
+
+  .description {
+    position: relative;
+    border-radius: 5px;
+    background-color: rgba($clickgui-base-color, 0.9);
+    filter: drop-shadow(0 0 10px rgba($clickgui-base-color, 0.5));
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-right: 8px solid rgba($clickgui-base-color, 0.9);
+      left: -8px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  .text {
+    font-size: 12px;
+    padding: 10px;
+    color: $clickgui-text-color;
+  }
+</style>
diff --git a/src-theme/src/routes/clickgui/modules/Module.svelte b/src-theme/src/routes/clickgui/modules/Module.svelte
new file mode 100644
index 00000000000..439e59057fb
--- /dev/null
+++ b/src-theme/src/routes/clickgui/modules/Module.svelte
@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    getModuleSettings,
+    setModuleSettings,
+    setModuleEnabled,
+  } from "../../../integration/rest";
+  import type { ConfigurableSetting } from "../../../integration/types";
+  import GenericSetting from "../setting/common/GenericSetting.svelte";
+  import { slide } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import {
+    description as descriptionStore,
+    highlightModuleName,
+  } from "../clickgui_store";
+  import { setItem } from "../../../integration/persistent_storage";
+  import {
+    convertToSpacedString,
+    spaceSeperatedNames,
+  } from "../../../theme/theme_config";
+
+  export let name: string;
+  export let enabled: boolean;
+  export let description: string;
+  export let aliases: string[];
+
+  let moduleNameElement: HTMLElement;
+  let configurable: ConfigurableSetting;
+  const path = `clickgui.${name}`;
+  let expanded = false;
+
+  onMount(async () => {
+    configurable = await getModuleSettings(name);
+
+    setTimeout(() => {
+      expanded = localStorage.getItem(path) === "true";
+    }, 500);
+  });
+
+  highlightModuleName.subscribe(() => {
+    if (name !== $highlightModuleName) {
+      return;
+    }
+
+    setTimeout(() => {
+      if (!moduleNameElement) {
+        return;
+      }
+      moduleNameElement.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }, 1000);
+  });
+
+  async function updateModuleSettings() {
+    await setModuleSettings(name, configurable);
+    configurable = await getModuleSettings(name);
+  }
+
+  async function toggleModule() {
+    await setModuleEnabled(name, !enabled);
+  }
+
+  function setDescription() {
+    const y =
+      (moduleNameElement?.getBoundingClientRect().top ?? 0) +
+      (moduleNameElement?.clientHeight ?? 0) / 2;
+    const x = moduleNameElement?.getBoundingClientRect().right ?? 0;
+    let moduleDescription = description;
+    if (aliases.length > 0) {
+      moduleDescription += ` (aka ${aliases.map((a) => ($spaceSeperatedNames ? convertToSpacedString(a) : a)).join(", ")})`;
+    }
+    descriptionStore.set({
+      x,
+      y,
+      description: moduleDescription,
+    });
+  }
+
+  async function toggleExpanded() {
+    expanded = !expanded;
+    await setItem(path, expanded.toString());
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="module"
+  class:expanded
+  class:has-settings={configurable?.value.length > 2}
+  in:slide={{ duration: 500, easing: quintOut }}
+  out:slide={{ duration: 500, easing: quintOut }}
+>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="name"
+    on:contextmenu|preventDefault={toggleExpanded}
+    on:click={toggleModule}
+    on:mouseenter={setDescription}
+    on:mouseleave={() => descriptionStore.set(null)}
+    bind:this={moduleNameElement}
+    class:enabled
+    class:highlight={name === $highlightModuleName}
+  >
+    {#if $spaceSeperatedNames}
+      {convertToSpacedString(name)}
+    {:else}
+      {name}
+    {/if}
+  </div>
+
+  {#if expanded && configurable}
+    <div class="settings">
+      {#each configurable.value as setting (setting.name)}
+        <GenericSetting
+          skipAnimationDelay={true}
+          {path}
+          bind:setting
+          on:change={updateModuleSettings}
+        />
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import "../../../colors.scss";
+
+  .module {
+    position: relative;
+
+    .name {
+      cursor: pointer;
+      transition:
+        ease background-color 0.2s,
+        ease color 0.2s;
+
+      color: $clickgui-text-dimmed-color;
+      text-align: center;
+      font-size: 12px;
+      font-weight: 500;
+      position: relative;
+      padding: 10px;
+
+      &.highlight::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        border: solid 2px $accent-color;
+      }
+
+      &:hover {
+        background-color: rgba($clickgui-base-color, 0.85);
+        color: $clickgui-text-color;
+      }
+
+      &.enabled {
+        color: $accent-color;
+      }
+    }
+
+    .settings {
+      background-color: rgba($clickgui-base-color, 0.5);
+      border-left: solid 4px $accent-color;
+      padding: 0 11px 0 7px;
+    }
+
+    &.has-settings {
+      .name::after {
+        content: "";
+        display: block;
+        position: absolute;
+        height: 10px;
+        width: 10px;
+        right: 15px;
+        top: 50%;
+        background-image: url("/img/clickgui/icon-settings-expand.svg");
+        background-position: center;
+        background-repeat: no-repeat;
+        opacity: 0.5;
+        transform-origin: 50% 50%;
+        transform: translateY(-50%) rotate(-90deg);
+        transition:
+          ease opacity 0.2s,
+          ease transform 0.4s;
+      }
+
+      &.expanded .name::after {
+        transform: translateY(-50%) rotate(0);
+        opacity: 1;
+      }
+    }
+  }
+</style>
diff --git a/src-theme/src/routes/clickgui/modules/Modules.svelte b/src-theme/src/routes/clickgui/modules/Modules.svelte
new file mode 100644
index 00000000000..cb5c3b0c472
--- /dev/null
+++ b/src-theme/src/routes/clickgui/modules/Modules.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { getModules } from "../../../integration/rest";
+  import type { GroupedModules, Module } from "../../../integration/types";
+  import { groupByCategory } from "../../../integration/util";
+  import Panel from "./Panel.svelte";
+  import Search from "../Search.svelte";
+  let modules: Module[] = [];
+  let categories: GroupedModules = {};
+
+  export let scaleFactor;
+
+  onMount(async () => {
+    modules = await getModules();
+    categories = groupByCategory(modules);
+  });
+</script>
+
+<Search modules={structuredClone(modules)} />
+
+{#each Object.entries(categories) as [category, modules], panelIndex}
+  <Panel {category} {modules} {panelIndex} {scaleFactor} />
+{/each}
diff --git a/src-theme/src/routes/clickgui/modules/Panel.svelte b/src-theme/src/routes/clickgui/modules/Panel.svelte
new file mode 100644
index 00000000000..016c183bdde
--- /dev/null
+++ b/src-theme/src/routes/clickgui/modules/Panel.svelte
@@ -0,0 +1,295 @@
+<script lang="ts">
+  import { afterUpdate, onMount } from "svelte";
+  import type { Module as TModule } from "../../../integration/types";
+  import { listen } from "../../../integration/ws";
+  import Module from "./Module.svelte";
+  import type { ToggleModuleEvent } from "../../../integration/events";
+  import { fly } from "svelte/transition";
+  import { quintOut } from "svelte/easing";
+  import { highlightModuleName, maxPanelZIndex } from "../clickgui_store";
+  import { setItem } from "../../../integration/persistent_storage";
+
+  export let category: string;
+  export let modules: TModule[];
+  export let panelIndex: number;
+  export let scaleFactor: number;
+
+  let panelElement: HTMLElement;
+  let modulesElement: HTMLElement;
+
+  let renderedModules: TModule[] = [];
+
+  let moving = false;
+  let prevX = 0;
+  let prevY = 0;
+  const panelConfig = loadPanelConfig();
+
+  interface PanelConfig {
+    top: number;
+    left: number;
+    expanded: boolean;
+    scrollTop: number;
+    zIndex: number;
+  }
+
+  function clamp(number: number, min: number, max: number) {
+    return Math.max(min, Math.min(number, max));
+  }
+
+  function loadPanelConfig(): PanelConfig {
+    const localStorageItem = localStorage.getItem(`clickgui.panel.${category}`);
+
+    if (!localStorageItem) {
+      return {
+        top: panelIndex * 50 + 20,
+        left: 20,
+        expanded: false,
+        scrollTop: 0,
+        zIndex: 0,
+      };
+    } else {
+      const config: PanelConfig = JSON.parse(localStorageItem);
+
+      // Migration
+      if (!config.zIndex) {
+        config.zIndex = 0;
+      }
+
+      if (config.zIndex > $maxPanelZIndex) {
+        $maxPanelZIndex = config.zIndex;
+      }
+
+      if (config.expanded) {
+        renderedModules = modules;
+      }
+
+      return config;
+    }
+  }
+
+  async function savePanelConfig() {
+    await setItem(`clickgui.panel.${category}`, JSON.stringify(panelConfig));
+  }
+
+  function fixPosition() {
+    panelConfig.left = clamp(
+      panelConfig.left,
+      0,
+      document.documentElement.clientWidth * (2 / scaleFactor) -
+        panelElement.offsetWidth,
+    );
+    panelConfig.top = clamp(
+      panelConfig.top,
+      0,
+      document.documentElement.clientHeight * (2 / scaleFactor) -
+        panelElement.offsetHeight,
+    );
+  }
+
+  function onMouseDown() {
+    moving = true;
+
+    panelConfig.zIndex = ++$maxPanelZIndex;
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    if (moving) {
+      panelConfig.left += (e.screenX - prevX) * (2 / scaleFactor);
+      panelConfig.top += (e.screenY - prevY) * (2 / scaleFactor);
+    }
+
+    prevX = e.screenX;
+    prevY = e.screenY;
+
+    fixPosition();
+    savePanelConfig();
+  }
+
+  function onMouseUp() {
+    moving = false;
+  }
+
+  function toggleExpanded() {
+    if (panelConfig.expanded) {
+      renderedModules = [];
+    } else {
+      renderedModules = modules;
+    }
+
+    panelConfig.expanded = !panelConfig.expanded;
+
+    setTimeout(() => {
+      fixPosition();
+      savePanelConfig();
+    }, 500);
+  }
+
+  function handleModulesScroll() {
+    panelConfig.scrollTop = modulesElement.scrollTop;
+    savePanelConfig();
+  }
+
+  highlightModuleName.subscribe(() => {
+    const highlightModule = modules.find(
+      (m) => m.name === $highlightModuleName,
+    );
+    if (highlightModule) {
+      panelConfig.zIndex = ++$maxPanelZIndex;
+      panelConfig.expanded = true;
+      renderedModules = modules;
+      savePanelConfig();
+    }
+  });
+
+  listen("toggleModule", (e: ToggleModuleEvent) => {
+    const moduleName = e.moduleName;
+    const moduleEnabled = e.enabled;
+
+    const mod = modules.find((m) => m.name === moduleName);
+    if (!mod) return;
+
+    mod.enabled = moduleEnabled;
+    modules = modules;
+    if (panelConfig.expanded) {
+      renderedModules = modules;
+    }
+  });
+
+  onMount(() => {
+    setTimeout(() => {
+      if (!modulesElement) {
+        return;
+      }
+
+      modulesElement.scrollTo({
+        top: panelConfig.scrollTop,
+        behavior: "smooth",
+      });
+    }, 500);
+  });
+</script>
+
+<svelte:window on:mouseup={onMouseUp} on:mousemove={onMouseMove} />
+
+<div
+  class="panel"
+  style="left: {panelConfig.left}px; top: {panelConfig.top}px; z-index: {panelConfig.zIndex};"
+  bind:this={panelElement}
+  in:fly|global={{ y: -30, duration: 200, easing: quintOut }}
+  out:fly|global={{ y: -30, duration: 200, easing: quintOut }}
+>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="title"
+    on:mousedown={onMouseDown}
+    on:contextmenu|preventDefault={toggleExpanded}
+  >
+    <img
+      class="icon"
+      src="img/clickgui/icon-{category.toLowerCase()}.svg"
+      alt="icon"
+    />
+    <span class="category">{category}</span>
+
+    <button class="expand-toggle" on:click={toggleExpanded}>
+      <div class="icon" class:expanded={panelConfig.expanded}></div>
+    </button>
+  </div>
+
+  <div
+    class="modules"
+    on:scroll={handleModulesScroll}
+    bind:this={modulesElement}
+  >
+    {#each renderedModules as { name, enabled, description, aliases } (name)}
+      <Module {name} {enabled} {description} {aliases} />
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  @import "../../../colors.scss";
+
+  .panel {
+    border-radius: 5px;
+    width: 250px;
+    position: absolute;
+    overflow: hidden;
+    box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);
+    will-change: transform;
+  }
+
+  .title {
+    display: grid;
+    grid-template-columns: max-content 1fr max-content;
+    align-items: center;
+    column-gap: 12px;
+    background-color: rgba($clickgui-base-color, 0.9);
+    border-bottom: solid 2px $accent-color;
+    padding: 10px 15px;
+    cursor: grab;
+
+    .category {
+      font-size: 14px;
+      color: $clickgui-text-color;
+      font-weight: 500;
+    }
+  }
+
+  .modules {
+    max-height: 545px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: rgba($clickgui-base-color, 0.8);
+  }
+
+  .modules::-webkit-scrollbar {
+    width: 0;
+  }
+
+  .expand-toggle {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    .icon {
+      height: 12px;
+      width: 12px;
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        background-color: white;
+        transition: transform 0.4s ease-out;
+        top: 0;
+        left: 50%;
+        width: 2px;
+        height: 100%;
+        margin-left: -1px;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        background-color: white;
+        transition: transform 0.4s ease-out;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        margin-top: -1px;
+      }
+
+      &.expanded {
+        &::before {
+          transform: rotate(90deg);
+        }
+
+        &::after {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+</style>

From c56e218676b95f36d30df6303e1b0f25295dbe1f Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Sun, 26 May 2024 23:58:15 +0200
Subject: [PATCH 09/11] Delete +layout.svelte

---
 src-theme/src/routes/clickgui/+layout.svelte | 66 --------------------
 1 file changed, 66 deletions(-)
 delete mode 100644 src-theme/src/routes/clickgui/+layout.svelte

diff --git a/src-theme/src/routes/clickgui/+layout.svelte b/src-theme/src/routes/clickgui/+layout.svelte
deleted file mode 100644
index 423384f2345..00000000000
--- a/src-theme/src/routes/clickgui/+layout.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script lang="ts">
-  import ClickGuiTabs from "./ClickGuiTabs.svelte";
-  import { onMount } from "svelte";
-  import {
-    getGameWindow,
-    getModules,
-    getModuleSettings,
-  } from "../../integration/rest";
-  import { groupByCategory } from "../../integration/util";
-  import type { GroupedModules, Module } from "../../integration/types";
-  import Panel from "./Panel.svelte";
-  import Search from "./Search.svelte";
-  import Description from "./modules/Description.svelte";
-  import { fade } from "svelte/transition";
-  import { listen } from "../../integration/ws";
-  import type {
-    ClickGuiScaleChangeEvent,
-    ScaleFactorChangeEvent,
-  } from "../../integration/events";
-
-  let minecraftScaleFactor = 2;
-  let clickGuiScaleFactor = 1;
-  $: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
-  $: zoom = scaleFactor * 50;
-
-  onMount(async () => {
-    const gameWindow = await getGameWindow();
-    minecraftScaleFactor = gameWindow.scaleFactor;
-
-    const clickGuiSettings = await getModuleSettings("ClickGUI");
-    clickGuiScaleFactor =
-      (clickGuiSettings.value.find((v) => v.name === "Scale")
-        ?.value as number) ?? 1;
-  });
-
-  listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
-    minecraftScaleFactor = e.scaleFactor;
-  });
-
-  listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
-    clickGuiScaleFactor = e.value;
-  });
-</script>
-
-<div
-  class="clickgui"
-  transition:fade|global={{ duration: 200 }}
-  style="zoom: {zoom}%; width: {(2 / scaleFactor) * 100}vw; height: {(2 /
-    scaleFactor) *
-    100}vh;"
->
-  <Description />
-  <ClickGuiTabs />
-  <slot></slot>
-</div>
-
-<style lang="scss">
-  @import "../../colors.scss";
-
-  .clickgui {
-    background-color: rgba($clickgui-base-color, 0.6);
-    overflow: hidden;
-    position: relative;
-    will-change: opacity;
-  }
-</style>

From fe69f5a125ed8c85be102b1aff70b9ed74093ea7 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Mon, 27 May 2024 11:15:12 +0200
Subject: [PATCH 10/11] Add example hud element

---
 src-theme/src/routes/clickgui/ClickGui.svelte |  3 +
 .../src/routes/clickgui/Hud/Element.svelte    | 90 +++++++++++++++++++
 .../src/routes/clickgui/Hud/HudEditor.svelte  | 21 +++++
 3 files changed, 114 insertions(+)
 create mode 100644 src-theme/src/routes/clickgui/Hud/Element.svelte
 create mode 100644 src-theme/src/routes/clickgui/Hud/HudEditor.svelte

diff --git a/src-theme/src/routes/clickgui/ClickGui.svelte b/src-theme/src/routes/clickgui/ClickGui.svelte
index 158a9ad8b79..6d2d76c37c5 100644
--- a/src-theme/src/routes/clickgui/ClickGui.svelte
+++ b/src-theme/src/routes/clickgui/ClickGui.svelte
@@ -10,6 +10,7 @@
     ScaleFactorChangeEvent,
   } from "../../integration/events";
   import Modules from "./modules/Modules.svelte";
+  import HudEditor from "./Hud/HudEditor.svelte";
 
   let minecraftScaleFactor = 2;
   let clickGuiScaleFactor = 1;
@@ -50,6 +51,8 @@
     <Modules {scaleFactor} />
   {:else if activeTab === "Settings"}
     settings
+  {:else if activeTab === "Hud"}
+    <HudEditor {scaleFactor} />
   {/if}
   <slot></slot>
 </div>
diff --git a/src-theme/src/routes/clickgui/Hud/Element.svelte b/src-theme/src/routes/clickgui/Hud/Element.svelte
new file mode 100644
index 00000000000..124077829b2
--- /dev/null
+++ b/src-theme/src/routes/clickgui/Hud/Element.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+  export let scaleFactor: number;
+  export let element: {
+    name: string;
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+  };
+
+  let startX = 0;
+  let startY = 0;
+  function onMouseDown(e: MouseEvent) {
+    console.log(e);
+
+    startX = e.clientX;
+    startY = e.clientY;
+
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", () => {
+      document.removeEventListener("mousemove", onMouseMove);
+    });
+  }
+
+  function onMouseMove(e: MouseEvent) {
+    element.x = Math.max(
+      Math.min(
+        element.x + e.movementX * (2 / scaleFactor),
+        window.innerWidth - element.width,
+      ),
+      0,
+    );
+    element.y = Math.max(
+      Math.min(
+        element.y + e.movementY * (2 / scaleFactor),
+        window.innerHeight - element.height,
+      ),
+      0,
+    );
+  }
+
+  function onResizeDown(e: MouseEvent) {
+    console.log("resize down");
+    document.addEventListener("mousemove", onResizeMove);
+    document.addEventListener("mouseup", () => {
+      document.removeEventListener("mousemove", onResizeMove);
+    });
+  }
+
+  function onResizeMove(e: MouseEvent) {
+    console.log("resize move");
+
+    element.width += e.movementX;
+    element.height += e.movementY;
+  }
+</script>
+
+<button
+  on:mousedown={onMouseDown}
+  class="element"
+  style="width: {element.width}px; height: {element.height}px; top: {element.y}px; left: {element.x}px;"
+>
+  <button class="resize-handle" on:mousedown|stopPropagation={onResizeDown}
+  ></button>
+</button>
+
+<style lang="scss">
+  @import "../../../colors.scss";
+
+  .element {
+    position: absolute;
+    background-color: rgba($clickgui-base-color, 0.3);
+    border: 2px solid $accent-color;
+    border-radius: 10px 10px 0 10px;
+    display: grid;
+    place-items: end end;
+  }
+
+  .resize-handle {
+    border: none;
+    background-color: $accent-color;
+    cursor: nwse-resize;
+
+    height: 10px;
+    width: 10px;
+    right: 0;
+    bottom: 0;
+    transform: translate(50%, 50%);
+  }
+</style>
diff --git a/src-theme/src/routes/clickgui/Hud/HudEditor.svelte b/src-theme/src/routes/clickgui/Hud/HudEditor.svelte
new file mode 100644
index 00000000000..4d691fbd3b9
--- /dev/null
+++ b/src-theme/src/routes/clickgui/Hud/HudEditor.svelte
@@ -0,0 +1,21 @@
+<script>
+  import Element from "./Element.svelte";
+
+  export let scaleFactor;
+
+  let elements = [
+    {
+      name: "HudEditor",
+      height: 100,
+      width: 200,
+      x: 100,
+      y: 100,
+    },
+  ];
+</script>
+
+<div class="hud-editor">
+  {#each elements as element}
+    <Element {element} {scaleFactor} />
+  {/each}
+</div>

From 311a779af72a57cfe75d0e1537038a95a4ed9510 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Mon, 27 May 2024 12:54:15 +0200
Subject: [PATCH 11/11] locked ratio

---
 .../src/routes/clickgui/Hud/Element.svelte    | 158 +++++++++++++++---
 .../src/routes/clickgui/Hud/HudEditor.svelte  |   5 +-
 2 files changed, 135 insertions(+), 28 deletions(-)

diff --git a/src-theme/src/routes/clickgui/Hud/Element.svelte b/src-theme/src/routes/clickgui/Hud/Element.svelte
index 124077829b2..3904cd404f9 100644
--- a/src-theme/src/routes/clickgui/Hud/Element.svelte
+++ b/src-theme/src/routes/clickgui/Hud/Element.svelte
@@ -4,12 +4,19 @@
     name: string;
     height: number;
     width: number;
+    heightRange: [number, number];
+    widthRange: [number, number];
     x: number;
     y: number;
+    variableRatio: boolean;
   };
 
   let startX = 0;
   let startY = 0;
+
+  const ratio = element.height / element.width;
+  console.log(element.height, element.width, ratio);
+
   function onMouseDown(e: MouseEvent) {
     console.log(e);
 
@@ -24,43 +31,104 @@
 
   function onMouseMove(e: MouseEvent) {
     element.x = Math.max(
-      Math.min(
-        element.x + e.movementX * (2 / scaleFactor),
-        window.innerWidth - element.width,
-      ),
+      Math.min(element.x + e.movementX, window.innerWidth - element.width),
       0,
     );
     element.y = Math.max(
-      Math.min(
-        element.y + e.movementY * (2 / scaleFactor),
-        window.innerHeight - element.height,
-      ),
+      Math.min(element.y + e.movementY, window.innerHeight - element.height),
       0,
     );
   }
 
-  function onResizeDown(e: MouseEvent) {
+  const onResizeDown = (x: number, y: number) => (e: MouseEvent) => {
     console.log("resize down");
-    document.addEventListener("mousemove", onResizeMove);
+    const resizeFunction = onResizeMove(x, y);
+    document.addEventListener("mousemove", resizeFunction);
     document.addEventListener("mouseup", () => {
-      document.removeEventListener("mousemove", onResizeMove);
+      document.removeEventListener("mousemove", resizeFunction);
     });
+  };
+
+  function updHeight(movementY: number, direction: number) {
+    if (direction === 0) return;
+    element.height = Math.max(
+      Math.min(element.height + movementY * direction, element.heightRange[1]),
+      element.heightRange[0],
+    );
+  }
+  function updWidth(movementX: number, direction: number) {
+    if (direction === 0) return;
+    element.width = Math.max(
+      Math.min(element.width + movementX * direction, element.widthRange[1]),
+      element.widthRange[0],
+    );
   }
 
-  function onResizeMove(e: MouseEvent) {
+  const onResizeMove = (x: number, y: number) => (e: MouseEvent) => {
     console.log("resize move");
+    const prevWidth = element.width;
+    const prevHeight = element.height;
+    if (element.variableRatio) {
+      updHeight(e.movementY, y);
+      updWidth(e.movementX, x);
+    } else {
+      const avg = e.movementX * ratio * x + e.movementY * y;
+      updWidth(avg, 1);
+      element.height = element.width * ratio;
+      console.log("rat", ratio);
+      console.log(element.width == element.height * ratio);
+    }
 
-    element.width += e.movementX;
-    element.height += e.movementY;
-  }
+    if (x < 0) {
+      element.x += prevWidth - element.width;
+    }
+
+    if (y < 0) {
+      element.y += prevHeight - element.height;
+    }
+  };
 </script>
 
 <button
   on:mousedown={onMouseDown}
   class="element"
-  style="width: {element.width}px; height: {element.height}px; top: {element.y}px; left: {element.x}px;"
+  style="width: {element.width * (2 / scaleFactor)}px; height: {element.height *
+    (2 / scaleFactor)}px; top: {element.y *
+    (2 / scaleFactor)}px; left: {element.x * (2 / scaleFactor)}px;"
 >
-  <button class="resize-handle" on:mousedown|stopPropagation={onResizeDown}
+  <!-- Resize handle bars -->
+  <button
+    class="resize-handle ew right-0 top-0 h-full"
+    on:mousedown|stopPropagation={onResizeDown(1, 0)}
+  ></button>
+  <button
+    class="resize-handle ew left-0 top-0 h-full"
+    on:mousedown|stopPropagation={onResizeDown(-1, 0)}
+  ></button>
+  <button
+    class="resize-handle ns left-0 top-0 w-full"
+    on:mousedown|stopPropagation={onResizeDown(0, -1)}
+  ></button>
+  <button
+    class="resize-handle ns left-0 bottom-0 w-full"
+    on:mousedown|stopPropagation={onResizeDown(0, 1)}
+  ></button>
+  <!-- Resize Handel points -->
+  <button
+    class="resize-handle left-0 top-0 nwse"
+    on:mousedown|stopPropagation={onResizeDown(-1, -1)}
+  ></button>
+  <button
+    class="resize-handle right-0 top-0 nesw"
+    on:mousedown|stopPropagation={onResizeDown(1, -1)}
+  ></button>
+  <button
+    class="resize-handle left-0 bottom-0 nesw"
+    on:mousedown|stopPropagation={onResizeDown(-1, 1)}
+  ></button>
+  <button
+    class="resize-handle right-0 bottom-0 nwse"
+    on:mousedown|stopPropagation={onResizeDown(1, 1)}
   ></button>
 </button>
 
@@ -69,22 +137,58 @@
 
   .element {
     position: absolute;
-    background-color: rgba($clickgui-base-color, 0.3);
-    border: 2px solid $accent-color;
-    border-radius: 10px 10px 0 10px;
-    display: grid;
-    place-items: end end;
+    background-color: rgba($clickgui-base-color, 0.2);
+    border: 2px solid rgba($accent-color, 0.8);
+    border-radius: 7px;
+    cursor: grab;
+    // display: grid;
+    // place-items: end end;
   }
 
   .resize-handle {
     border: none;
-    background-color: $accent-color;
-    cursor: nwse-resize;
+    // background-color: $accent-color;
+    background-color: transparent;
 
+    position: absolute;
     height: 10px;
     width: 10px;
-    right: 0;
-    bottom: 0;
-    transform: translate(50%, 50%);
+    // transform: translate(50%, 50%);
+  }
+
+  .right-0 {
+    right: -5px;
+  }
+  .left-0 {
+    left: -5px;
+  }
+
+  .top-0 {
+    top: -5px;
+  }
+
+  .bottom-0 {
+    bottom: -5px;
+  }
+
+  .h-full {
+    height: calc(100% + 10px);
+  }
+  .w-full {
+    width: 100%;
+  }
+
+  .ns {
+    cursor: ns-resize;
+  }
+  .ew {
+    cursor: ew-resize;
+  }
+
+  .nwse {
+    cursor: nwse-resize;
+  }
+  .nesw {
+    cursor: nesw-resize;
   }
 </style>
diff --git a/src-theme/src/routes/clickgui/Hud/HudEditor.svelte b/src-theme/src/routes/clickgui/Hud/HudEditor.svelte
index 4d691fbd3b9..f02a9f28f57 100644
--- a/src-theme/src/routes/clickgui/Hud/HudEditor.svelte
+++ b/src-theme/src/routes/clickgui/Hud/HudEditor.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import Element from "./Element.svelte";
 
   export let scaleFactor;
@@ -8,8 +8,11 @@
       name: "HudEditor",
       height: 100,
       width: 200,
+      heightRange: [50, 200] as [number, number],
+      widthRange: [100, 400] as [number, number],
       x: 100,
       y: 100,
+      variableRatio: false,
     },
   ];
 </script>