feat: Combo Bind (frontend) (#6407)

Co-authored-by: sqlerrorthing <148702857+sqlerrorthing@users.noreply.github.com>

Author: MukjepScarlet

src-theme/src/integration/ws.ts

@@ -49,21 +49,52 @@ export function listenAlways<NAME extends keyof EventMap>(eventName: NAME, callb
 /**
  * Registers a event listener that will be called on every event of the given name.
  *
- * The listener will be automatically removed when the component is destroyed.
- *
- * Should only be used inside a Svelte component.
- *
  * @param eventName
  * @param callback
+ * @return A function that can be called to remove the listener.
  */
-export function listen<NAME extends keyof EventMap>(eventName: NAME, callback: (event: EventMap[NAME]) => void) {
+function listenNonComponent<NAME extends keyof EventMap>(eventName: NAME, callback: (event: EventMap[NAME]) => void) {
     if (!listeners.has(eventName)) {
         listeners.set(eventName, []);
     }
 
     listeners.get(eventName)!!.push(callback);
 
-    onDestroy(() => deleteListener(eventName, callback));
+    return () => deleteListener(eventName, callback);
+}
+
+/**
+ * Registers a event listener that will be called on every event of the given name.
+ *
+ * The listener will be automatically removed when the component is destroyed.
+ *
+ * Should only be used inside a Svelte component.
+ *
+ * @param eventName
+ * @param callback
+ */
+export function listen<NAME extends keyof EventMap>(eventName: NAME, callback: (event: EventMap[NAME]) => void) {
+    const onDestroyHook = listenNonComponent(eventName, callback);
+    onDestroy(onDestroyHook);
+}
+
+/**
+ * Wait next event which matches given {@link predicate}.
+ */
+export async function waitMatches<NAME extends keyof EventMap>(eventName: NAME, predicate: (event: EventMap[NAME]) => boolean): Promise<EventMap[NAME]> {
+    return new Promise((resolve, reject) => {
+        const deleteHandler = listenNonComponent(eventName, (e) => {
+            try {
+                if (predicate(e)) {
+                    resolve(e);
+                    deleteHandler();
+                }
+            } catch (e) {
+                reject(e);
+                deleteHandler();
+            }
+        })
+    });
 }
 
 export function cleanupListeners() {

src-theme/src/routes/clickgui/Module.svelte

@@ -133,7 +133,8 @@
 </div>
 
 <style lang="scss">
-  @use "../../colors.scss" as *;
+  @use "../../colors" as *;
+  @use "./icon-settings-expand" as *;
 
   .module {
     position: relative;
@@ -178,21 +179,8 @@
 
     &.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;
+        @include icon-settings-expand($right: 15px);
         opacity: 0.5;
-        transform-origin: 50% 50%;
-        transform: translateY(-50%) rotate(-90deg);
-        transition: ease opacity 0.2s,
-        ease transform 0.4s;
       }
 
       &.expanded .name::after {

src-theme/src/routes/clickgui/icon-settings-expand.scss

@@ -0,0 +1,38 @@
+/*!
+ * This file is part of LiquidBounce (https://github.com/CCBlueX/LiquidBounce)
+ *
+ * Copyright (c) 2015 - 2025 CCBlueX
+ *
+ * LiquidBounce is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * LiquidBounce is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with LiquidBounce. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@mixin icon-settings-expand(
+  $size: 10px,
+  $right: 10px,
+  $rotate: -90deg,
+) {
+  content: "";
+  display: block;
+  position: absolute;
+  height: $size;
+  width: $size;
+  right: $right;
+  top: 50%;
+  background-image: url("/img/clickgui/icon-settings-expand.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  transform-origin: 50% 50%;
+  transform: translateY(-50%) rotate($rotate);
+  transition: ease opacity 0.2s, ease transform 0.4s;
+}

src-theme/src/routes/clickgui/setting/BindSetting.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    import type {BindModifier} from "../../../../integration/types";
+    import {os} from "../../clickgui_store";
+
+    export let modifiers: Iterable<BindModifier>;
+    export let boundKey: string | undefined;
+
+    const getRenderString = (modifier: BindModifier) => {
+        switch ($os) {
+            case "windows":
+                switch (modifier) {
+                    case "Control":
+                        return "Ctrl";
+                    case "Super":
+                        return "\u229e";
+                    default:
+                        return modifier;
+                }
+            case "mac":
+                switch (modifier) {
+                    case "Shift":
+                        return "\u21e7";
+                    case "Control":
+                        return "^";
+                    case "Alt":
+                        return "\u2325";
+                    case "Super":
+                        return "\u2318";
+                    default:
+                        return modifier;
+                }
+            default:
+                return modifier;
+        }
+    };
+</script>
+
+<span class="wrapper">
+    {#if boundKey}
+        {#each modifiers as modifier (modifier)}
+            <span>{getRenderString(modifier)}</span>
+            <span class="divider">+</span>
+        {/each}
+        <span class="boundKey">{boundKey}</span>
+    {:else}
+        <span class="dimmed">None</span>
+    {/if}
+</span>
+
+<style lang="scss">
+  @use "../../../../colors" as *;
+
+  .wrapper {
+    column-gap: 2px;
+    display: flex;
+    align-items: center;
+  }
+
+  .dimmed {
+    color: $clickgui-text-dimmed-color;
+  }
+
+  .divider {
+    color: $clickgui-text-dimmed-color;
+    opacity: 0.8;
+    font-size: 10px;
+    line-height: 1;
+    font-family: monospace;
+  }
+
+  .boundKey {
+    font-weight: bold;
+  }
+</style>