feat: click-through toggle

Author: blaiyz

README.md

@@ -14,6 +14,7 @@ A Zebar configuration forked from [Neobrutal Zebar](https://github.com/adriankar
 - Multi-monitor support
 - Windows Taskbar integration (experimental)
 - Background effects (Acrylic, Blur, Mica)
+- Click-through ability (disable interactivity and cursor events to windows below)
 
 ## 🖼️ Showcase
 
@@ -98,7 +99,15 @@ General configuration is defined in `config.json`, which ships together with the
     "enableErrorLogging": false
   },
   "backgroundEffect": "acrylic",
-  "enableAutoTiling": true
+  "enableAutoTiling": true,
+  "clickThroughByDefault": false,
+  "showFullDateByDefault": false,
+  "showHeartButton": true,
+  "showCpuSection": true,
+  "showMemorySection": true,
+  "showBatterySection": true,
+  "showNetworkSection": true,
+  "showWeatherSection": true
 }
 ```
 
@@ -326,15 +335,16 @@ In addition to colors, `config.css` provides variables that control other style
 
 </details>
 
-## 🎉 Background Effects
+## 🎉 Background Effects & Click-Through
 
 > [!WARNING]
-> This feature does not work in Windows 11 (Currently, supports only Windows 10). To achieve similar background effects, use an external application like [Mica For Everyone](https://github.com/MicaForEveryone/MicaForEveryone).
+> Background effects do not work in Windows 11 (Currently, supports only Windows 10). To achieve similar background effects, use an external application like [Mica For Everyone](https://github.com/MicaForEveryone/MicaForEveryone).
+> Click-through works fine in all platforms, however note that it completely disables interactivity with the Zebar widget.
 
-To enable background effects, you need to recompile Zebar with a modification. You must have Rust and Node.js installed on your system.
+To enable any of these two features, you need to recompile Zebar with a modification. You must have Rust and Node.js installed on your system.
 
 1. Clone the Zebar repository: `git clone https://github.com/glzr-io/zebar.git`
-2. Navigate to `packages/desktop/capabilities/widget.json` and add the following permission:
+2. Navigate to `packages/desktop/capabilities/widget.json` and add the following two permissions (don't forget the trailing commas!):
 
 ```json
 {
@@ -347,7 +357,8 @@ To enable background effects, you need to recompile Zebar with a modification. Y
     "core:window:allow-set-position",
     "core:window:allow-set-size",
     "core:window:allow-set-title",
-    "core:window:allow-set-effects" <--- ADD THIS
+    "core:window:allow-set-effects",             <--- ADD THIS
+    "core:window:allow-set-ignore-cursor-events" <--- AND THIS
   ]
 }
 ```
@@ -373,7 +384,42 @@ pnpm run build
 > [!NOTE]
 > By default, Zebar uses the rust nightly channel. To install it properly, you need to run (after uninstalling nightly if you have it already installed) `rustup toolchain install nightly --allow-downgrade --profile minimal`, otherwise Zebar may not be able to build. If it still doesn't manage to build, try changing the channel in `rust-toolchain.toml` to `stable`.
 
-After installation, you can enable background effects in `config.json`.
+After installation, follow these instructions:
+
+### Enable Background Effects
+
+In `config.json`, set the `backgroundEffect` field to one of the values provided by the schema.
+
+### Enable Click-Through
+
+To use click-through, you must modify the GlazeWM configuration.
+
+- In `config.yaml`, add a new binding mode for click-through under `binding_modes`:
+
+```yaml
+binding_modes:
+  ...
+
+  # Click-through mode disables interactivity
+  - name: 'ct'
+```
+
+The name of the binding mode **must** be `ct` for the commands to work properly.
+
+- Add a keybinding to toggle click-through mode under `keybindings`:
+
+```yaml
+keybindings:
+  ...
+
+  # Sends a signal to Zebar via the binding mode
+  - commands: ['wm-enable-binding-mode --name ct', "wm-disable-binding-mode --name ct"]
+    bindings: ['alt+shift+c']
+```
+
+And now you can toggle click-through mode by pressing `Alt + Shift + C`.
+
+`config.json` also provides `clickThroughByDefault` field to enable click-through mode by default on startup.
 
 ## 🧪 Taskbar Integration
 

package.json

@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",
-    "@lucide/svelte": "^0.541.0",
+    "@lucide/svelte": "^0.561.0",
     "@sveltejs/adapter-auto": "^6.1.0",
     "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.31.1",

pnpm-lock.yaml

@@ -43,7 +43,16 @@
 <div class="flex flex-row gap-3 items-center">
   {#if config.showHeartButton}
     <Button class="text-zb-icon"
-      ><IconHeartFilled class="text-zb-icon" /></Button
+      ><IconHeartFilled
+        class="text-zb-icon"
+        onclick={() => {
+          // Opens in a new msedge webview window. Can't open in the default
+          // browser without additional ACL in tauri.
+          window
+            .open("https://github.com/blaiyz/neosoft-zebar", "_blank")
+            ?.focus();
+        }}
+      /></Button
     >
   {/if}
   {#if config.showMemorySection}

src/components/LeftGroup.svelte

@@ -7,12 +7,14 @@
   import { providers } from "$lib/providers.svelte";
   import { getWindows } from "$lib/utils/glaze_wm_utils.svelte";
   import ArrowRightLeft from "@lucide/svelte/icons/arrow-right-left";
+  import MousePointer2Off from "@lucide/svelte/icons/mouse-pointer-2-off";
   import type { Icon as IconType } from "@tabler/icons-svelte";
   import Background from "@tabler/icons-svelte/icons/background";
   import { flip } from "svelte/animate";
   import { fly } from "svelte/transition";
   import Button from "./Button.svelte";
   import SmoothDiv from "./SmoothDiv.svelte";
+  import { toggleModes } from "$lib/binding_modes.svelte";
 
   const getProcessIcon = (child: Window): IconType => {
     const possibleAppNames = [
@@ -84,30 +86,36 @@
       />
     </button>
     <SmoothDiv outerClass="flex justify-end" innerClass="flex items-center">
-      {#each glazewm.bindingModes as bindingMode (bindingMode.name)}
+      {#if toggleModes.clickThrough}
+        <span
+          transition:fly={{ y: 20, duration: config.transitionDuration }}
+          class="relative flex flex-row-reverse"
+        >
+          <MousePointer2Off
+            class="{toggleModes.clickThrough
+              ? ''
+              : 'absolute'} text-zb-click-through mx-1"
+          />
+        </span>
+      {/if}
+    </SmoothDiv>
+    <SmoothDiv outerClass="flex justify-end" innerClass="flex items-center">
+      {#each glazewm.bindingModes.filter((mode) => mode.name !== "ct") as bindingMode (bindingMode.name)}
         <button
           transition:fly={{ y: 20, duration: config.transitionDuration }}
           animate:flip={{ duration: config.transitionDuration }}
           class="mx-[0.5rem]"
           onclick={() => {
-            switch (bindingMode.name.toLowerCase()) {
-              case "pause":
-                glazewm!.runCommand("wm-disable-binding-mode --name pause");
-                break;
-
-              case "resize":
-                glazewm!.runCommand("wm-disable-binding-mode --name resize");
-                break;
-
-              default:
-                break;
-            }
+            glazewm!.runCommand(
+              `wm-disable-binding-mode --name ${bindingMode.name}`
+            );
           }}
         >
           {bindingMode.displayName ?? bindingMode.name}
         </button>
       {/each}
     </SmoothDiv>
+
     {#if glazewm.displayedWorkspace}
       <SmoothDiv
         outerClass="flex justify-end"

src/components/Workspaces.svelte

@@ -0,0 +1,60 @@
+import { currentWidget } from "zebar";
+import { providers } from "./providers.svelte";
+import { untrack } from "svelte";
+import { config, configLoaded } from "./config.svelte";
+
+const bindingModes = $derived(providers.glazewm?.bindingModes || []);
+const clickThroughBindingMode = $derived(
+  bindingModes.find((mode) => mode.name === "ct") || null
+);
+
+const toggleModes = $state({
+  clickThrough: false
+});
+
+export function initializeBindingModesObserver() {
+  $effect(() => {
+    /* The click through binding mode needs to be configured to be toggled on and off
+     * in the GlazeWM config.yaml file, and we just listen for its activation here as
+     * a single toggle.
+     * For example (config.yaml):
+     *
+     * # Sends a signal to Zebar via the binding mode
+     *  commands: ['wm-enable-binding-mode --name ct', "wm-disable-binding-mode --name ct"]
+     *  bindings: ['alt+shift+c']
+     *
+     *
+     * The reason we do it this way is that GlazeWM binding modes do not inherit the
+     * default keybindings, so in order to toggle our own custom mode while keeping all the keybindings,
+     * we capture the activation signal by toggling the binding mode on and off and
+     * save the state (signaled by the flip-flop) in our own Svelte state.
+     *
+     * If you think of a better way to do this, please let me know!
+     */
+
+    // Avoid cycles by untracking the current toggle state
+    const currentToggle = untrack(() => toggleModes.clickThrough);
+
+    if (clickThroughBindingMode) {
+      toggleModes.clickThrough = !currentToggle;
+    }
+  });
+
+  $effect(() => {
+    // Here we use our custom state derived from the binding mode flip-flops
+    const window = currentWidget().tauriWindow;
+    if (toggleModes.clickThrough) {
+      window.setIgnoreCursorEvents(true);
+      console.log("Set window to click-through");
+    } else {
+      window.setIgnoreCursorEvents(false);
+      console.log("Unset window to click-through");
+    }
+  });
+
+  configLoaded.then(() => {
+    toggleModes.clickThrough = config.clickThroughByDefault;
+  });
+}
+
+export { toggleModes };

src/lib/binding_modes.svelte.ts

@@ -76,6 +76,11 @@ export interface Config {
    */
   showFullDateByDefault: boolean;
 
+  /**
+   * Enable click-through by default.
+   */
+  clickThroughByDefault: boolean;
+
   // Individual section toggles
 
   showHeartButton: boolean;

src/lib/config.svelte.ts

@@ -5,6 +5,7 @@
   import { Effect } from "@tauri-apps/api/window";
 
   import { initializeAutotiler } from "$lib/autotiler.svelte";
+  import { initializeBindingModesObserver } from "$lib/binding_modes.svelte";
   import { config, configLoaded } from "$lib/config.svelte";
   import { initProviders, providers } from "$lib/providers.svelte";
   import { isOnPrimaryMonitor } from "$lib/utils/glaze_wm_utils.svelte";
@@ -16,6 +17,7 @@
 
   let glazewm = $derived(providers.glazewm);
   initializeAutotiler();
+  initializeBindingModesObserver();
 
   onMount(() => {
     initProviders();

src/routes/+page.svelte

@@ -22,6 +22,7 @@
   },
   "backgroundEffect": "acrylic",
   "enableAutoTiling": true,
+  "clickThroughByDefault": false,
   "showFullDateByDefault": false,
   "showHeartButton": true,
   "showCpuSection": true,

static/config.json

@@ -77,6 +77,10 @@
       "$ref": "#/definitions/BackgroundEffect",
       "description": "The background effect to use for the widget.\n\nNOTE: In order to use anything other than inherit, you must recompile zebar with an extra permission. More details in the README.\n\n`inherit`- Don't change the effect, and use the one defined in zpack.json (probably transparent).\n`acrylic`- Use an acrylic background effect. Windows 10, 11.\n`blur`- Use a blur background effect. Windows 10, 11.\n`mica`- Use a mica background effect. Windows 11 only."
     },
+    "clickThroughByDefault": {
+      "description": "Enable click-through by default.",
+      "type": "boolean"
+    },
     "direction": {
       "$ref": "#/definitions/AttachmentDirection",
       "description": "The visual direction of the widget.\n\n`top`- The top of the widget has inverted corner radius, and the bottom has normal corner radius.\n\n`bottom`- The bottom of the widget has inverted corner radius, and the top has normal corner radius.\n\n`floating`- All corners of the widget have normal corner radius."