gitea/nyx
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix toolbar: use module-level ref instead of provide/inject

Browse Source 
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.
This commit is contained in:
Nico 2026-04-03 22:54:33 +02:00
parent 2df8071312
commit 4dbeea787a
2 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AppToolbar.vue
View File

@ -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?.() ?? {});

14
src/composables/useToolbar.ts
View File

@ -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 <RouterView>, not a descendant.
const TOOLBAR_KEY: InjectionKey<ToolbarConfig> = Symbol('toolbar');
const _config = ref<ToolbarConfig | null>(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<ToolbarConfig | null> {
return _config;
}
// --- useConnection: manages an SSE endpoint, returns connection state ---