Skip to content

Conversation

@JonBarakMierke
Copy link

What this does

Adds an optional on-screen toggle button to open/close the WireSpy debug panel.

Why

Keyboard shortcuts can conflict with OS/browser shortcuts, making the panel
inaccessible for some users.

How

Reuses existing toggle logic

@wire-spy-toggle.window="show = !show"

Button is optional via config

  • No behavior changes by default
<?php

return [
    /*
     * Enable or disable WireSpy.
     * By default, WireSpy will only be enabled in your development environment.
     */
    'enabled' => env('WIRE_SPY_ENABLED'),

    /**
     * The keybinding configuration option allows you to define a keyboard shortcut
     * using AlpineJS syntax. It accepts a string representing the desired key combination.
     *
     * Syntax:
     * - 'super' corresponds to the 'Cmd' key on macOS and the 'Ctrl' key on Windows/Linux.
     * - Combine with other keys using dot notation, like 'super.l' for 'Cmd+L' or 'Ctrl+L'.
     */
    'keybinding' => 'super.l',


    /**
     * By default WireSpy can only be triggered by keyboard shortcuts.
     * If you need to trigger the panel's visibility by a button either set the WIRE_SPY_BUTTON_ENABLED to true
     * in your .env file or publish the config file and set the value to true.
     */
    'button_enabled' => env('WIRE_SPY_BUTTON_ENABLED', false),
];

Added trigger.blade.php

  • Button styling is basic. It could definitely use some work.
<button
    x-data
    @click="$dispatch('wire-spy-toggle')"
    style="
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 99999999;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        border-radius: 9999px;
        background: #18181b;
        color: #e5e7eb;

        font-size: 18px;
        line-height: 1;

        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,.4);
    "
    title="Toggle WireSpy"
>
    🐞
</button>

Screenshots

image

Works globally.

(The entire reason I did this is that I needed to be able to trigger it while building a Filament panel).
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant