From 9cd4f9ceabf808217991c9015cab45698a921c75 Mon Sep 17 00:00:00 2001
From: JonBarakMierke <jonmierkebarak@gmail.com>
Date: Fri, 19 Dec 2025 20:55:09 -0600
Subject: [PATCH] feat: add optional on-screen toggle button for WireSpy panel

---
 config/wire-spy.php               |  8 ++++++++
 resources/views/toolbar.blade.php |  2 +-
 resources/views/trigger.blade.php | 30 ++++++++++++++++++++++++++++++
 src/SupportAutoInjectedAssets.php | 18 +++++++++++++++++-
 4 files changed, 56 insertions(+), 2 deletions(-)
 create mode 100644 resources/views/trigger.blade.php

diff --git a/config/wire-spy.php b/config/wire-spy.php
index 1d83eaa..cb7c4e2 100644
--- a/config/wire-spy.php
+++ b/config/wire-spy.php
@@ -16,4 +16,12 @@
      * - 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),
 ];
diff --git a/resources/views/toolbar.blade.php b/resources/views/toolbar.blade.php
index 21b1dc5..4e7058e 100644
--- a/resources/views/toolbar.blade.php
+++ b/resources/views/toolbar.blade.php
@@ -1,4 +1,4 @@
-<div x-data="wireSpy" x-on:keydown.window.prevent.{{ config('wire-spy.keybinding', 'super.l') }}="show = !show" x-cloak :style="show ? `height: ${height}px;` : `height: 0`;" :class="isResizing ? '' : 'transition-all'" class="font-sans antialiased fixed z-[99999999] flex flex-col inset left-0 bottom-0 w-full bg-zinc-900 rounded-t-lg text-gray-300">
+<div x-data="wireSpy" x-on:keydown.window.prevent.{{ config('wire-spy.keybinding', 'super.l') }}="show = !show"  @wire-spy-toggle.window="show = !show" x-cloak :style="show ? `height: ${height}px;` : `height: 0`;" :class="isResizing ? '' : 'transition-all'" class="font-sans antialiased fixed z-[99999999] flex flex-col inset left-0 bottom-0 w-full bg-zinc-900 rounded-t-lg text-gray-300">
     @include('wire-spy::navbar')
 
     <div class="flex flex-1 overflow-hidden">
diff --git a/resources/views/trigger.blade.php b/resources/views/trigger.blade.php
new file mode 100644
index 0000000..a2f9719
--- /dev/null
+++ b/resources/views/trigger.blade.php
@@ -0,0 +1,30 @@
+<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>
diff --git a/src/SupportAutoInjectedAssets.php b/src/SupportAutoInjectedAssets.php
index a7c0c94..727c9e1 100644
--- a/src/SupportAutoInjectedAssets.php
+++ b/src/SupportAutoInjectedAssets.php
@@ -34,7 +34,17 @@ public static function provide()
 
                 $assetsHead .= sprintf('<style>%s</style>', file_get_contents(base_path('vendor/wire-elements/wire-spy/dist/wire-spy.min.css')))."\n";
                 $assetsBody .= sprintf('<script src="/livewire/wire-spy.min.js?id=%s"></script>', $cacheId)."\n";
-                $assetsBody .= Blade::render('<div class="wire-spy"><livewire:wire-spy /></div>');
+                if (static::shouldInjectWireSpyTriggerButton()) {
+                    $assetsBody .= view('wire-spy::trigger')->render() . "\n";
+                }
+                $assetsBody .= Blade::render('
+                    <div class="wire-spy-root">
+                        <div id="wire-spy-trigger"></div>
+                        <div class="wire-spy">
+                            <livewire:wire-spy />
+                        </div>
+                    </div>
+                ');
             }
 
             if ($assetsHead === '' && $assetsBody === '') {
@@ -63,4 +73,10 @@ protected static function shouldInjectWireSpyAssets()
 
         return false;
     }
+
+    protected static function shouldInjectWireSpyTriggerButton(): bool
+    {
+        return static::shouldInjectWireSpyAssets() 
+            && config('wire-spy.button_enabled');
+    }
 }