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 ---