cameleer-server/ui/src/hooks/useScope.ts

// ui/src/hooks/useScope.ts
import { useParams, useNavigate, useLocation } from 'react-router';
import { useCallback } from 'react';

export type TabKey = 'exchanges' | 'dashboard' | 'runtime' | 'apps';

const VALID_TABS = new Set<TabKey>(['exchanges', 'dashboard', 'runtime', 'apps']);

export interface Scope {
  tab: TabKey;
  appId?: string;
  routeId?: string;
  exchangeId?: string;
}

export function useScope() {
  const params = useParams<{ tab?: string; appId?: string; routeId?: string; exchangeId?: string }>();
  const navigate = useNavigate();
  const location = useLocation();

  // Derive tab from first URL segment — fallback to 'exchanges'
  const rawTab = location.pathname.split('/').filter(Boolean)[0] ?? 'exchanges';
  const tab: TabKey = VALID_TABS.has(rawTab as TabKey) ? (rawTab as TabKey) : 'exchanges';

  const scope: Scope = {
    tab,
    appId: params.appId,
    routeId: params.routeId,
    exchangeId: params.exchangeId,
  };

  const setTab = useCallback((newTab: TabKey) => {
    const parts = ['', newTab];
    if (scope.appId) parts.push(scope.appId);
    if (scope.routeId) parts.push(scope.routeId);
    navigate(parts.join('/'));
  }, [navigate, scope.appId, scope.routeId]);

  return { scope, setTab };
}