From 4dbeea787ab839b63b5f4862fec2be2c56b8a17e Mon Sep 17 00:00:00 2001 From: Nico Date: Fri, 3 Apr 2026 22:54:33 +0200 Subject: [PATCH] Fix toolbar: use module-level ref instead of provide/inject MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit AppToolbar is a sibling of RouterView, not a descendant — provide/inject only flows down the tree. Module-level reactive ref works across boundaries: views write on mount/unmount, toolbar reads reactively. --- src/components/AppToolbar.vue | 6 +++--- src/composables/useToolbar.ts | 14 ++++++++------ 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/AppToolbar.vue b/src/components/AppToolbar.vue index fc7bf1a..299c144 100644 --- a/src/components/AppToolbar.vue +++ b/src/components/AppToolbar.vue @@ -96,10 +96,10 @@ const { theme, setTheme } = useTheme(); const chatStore = useChatStore(); const { availablePanels, togglePanel: togglePanelBtn, isPanelOpen, togglePane, isPaneOpen } = usePanels(); -// Toolbar config — injected from active view +// Toolbar config — set by active view via provideToolbar() const toolbar = injectToolbar(); -const hasGroup = (g: string) => toolbar?.groups.includes(g as any) ?? false; -const conn = computed(() => toolbar?.connection); +const hasGroup = (g: string) => toolbar.value?.groups.includes(g as any) ?? false; +const conn = computed(() => toolbar.value?.connection); const connActive = computed(() => conn.value?.connected.value ?? false); const connLabel = computed(() => conn.value?.label.value ?? ''); const connDetails = computed(() => conn.value?.details?.() ?? {}); diff --git a/src/composables/useToolbar.ts b/src/composables/useToolbar.ts index ba6ac56..9f90756 100644 --- a/src/composables/useToolbar.ts +++ b/src/composables/useToolbar.ts @@ -9,7 +9,7 @@ * Views that don't provide → toolbar shows nothing (login, home). */ -import { inject, provide, onMounted, onUnmounted, ref, type InjectionKey, type Ref } from 'vue'; +import { onMounted, onUnmounted, ref, type Ref } from 'vue'; // --- Types --- @@ -26,16 +26,18 @@ export interface ToolbarConfig { groups: ToolbarGroup[]; } -// --- Injection key --- +// --- Global reactive config — views write on mount/unmount, toolbar reads --- +// Cannot use provide/inject: AppToolbar is a sibling of , not a descendant. -const TOOLBAR_KEY: InjectionKey = Symbol('toolbar'); +const _config = ref(null); export function provideToolbar(config: ToolbarConfig) { - provide(TOOLBAR_KEY, config); + onMounted(() => { _config.value = config; }); + onUnmounted(() => { _config.value = null; }); } -export function injectToolbar(): ToolbarConfig | undefined { - return inject(TOOLBAR_KEY, undefined); +export function injectToolbar(): Ref { + return _config; } // --- useConnection: manages an SSE endpoint, returns connection state ---