@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha.1

package/src/modules/resourceJump/context/ResourceJumpContext.tsx

@@ -0,0 +1,395 @@
+import type {
+  EnvSlug,
+  JumpResourceSlug,
+  LateResolvableParam,
+} from '@env-hopper/backend-core'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { mapValues } from 'radashi'
+import type { ReactNode } from 'react'
+import {
+  createContext,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useCrossCuttingParamsContext } from '~/modules/crossCuttingParams/CrossCuttingParamsContext'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpHistory } from '~/modules/resourceJump/context/useResouceJumpHistory'
+import { getFlashipResource } from '~/modules/resourceJump/utils/helpers'
+import { mapToResouceJumpUis } from '~/modules/resourceJump/utils/mapToResouceJumpUis'
+import type { EhUrlParams } from '~/types/ehTypes'
+import { getEhToOptions } from '~/util/route-utils'
+import { ApiQueryMagazineResourceJump } from '../api/ApiQueryMagazineResourceJump'
+import type {
+  ResourceJumpHistoryItem,
+  ResourceJumpLoaderReturn,
+  ResourceJumpUI,
+} from '../types'
+import { buildJumpUrl } from '../utils/buildJumpUrl'
+import type { FlagshipResourceJumpUi } from '../utils/mapToFlagshipResourceJumps'
+import { mapToFlagshipResourceJumps } from '../utils/mapToFlagshipResourceJumps'
+
+export interface ResourceJumpContextIface {
+  setCurrentResourceJumpSlug: (slug: JumpResourceSlug | undefined) => void
+  currentResourceJump: ResourceJumpUI | undefined
+  flagshipJumpResources: Array<FlagshipResourceJumpUi>
+  resourceJumps: Array<ResourceJumpUI>
+  isLoadingResourceJumps: boolean
+  getJumpUrl: (
+    jumpResourceSlug: JumpResourceSlug | undefined,
+    envSlug: EnvSlug | undefined,
+  ) => string | undefined
+  initialResourceSlug: string | undefined
+  currentLateResolvableParams: Array<LateResolvableParam>
+  currentLateResolvableParamsValue: Array<{ slug: string; value: string }>
+  currentFlagship: FlagshipResourceJumpUi | undefined
+  setCurrentFlagship: (slug: string | undefined) => void
+  setLateResolvableParamValue: (slug: string, value: string) => void
+  setLateResolvableParamValues: (values: Record<string, string>) => void
+  leftEnvSelectorValue: string
+  setLeftEnvSelectorValue: (value: string) => void
+  history: Array<ResourceJumpHistoryItem>
+}
+
+export const ResourceJumpContext = createContext<
+  ResourceJumpContextIface | undefined
+>(undefined)
+
+interface ResourceJumpProviderProps {
+  children: ReactNode
+  initialJumpLinkSlug?: string
+  resourceJumpLoader: ResourceJumpLoaderReturn
+}
+
+export function ResourceJumpProvider({
+  children,
+  resourceJumpLoader,
+}: ResourceJumpProviderProps) {
+  const { currentEnv } = useEnvironmentContext()
+  const navigate = useNavigate()
+
+  // Fetch ResourceJumpsData using React Query
+  const { data: apiData, isLoading: isLoadingResourceJumps } = useQuery(
+    ApiQueryMagazineResourceJump.getResourceJumps(),
+  )
+
+  const flagshipJumpResources = useMemo<Array<FlagshipResourceJumpUi>>(
+    () => (apiData ? mapToFlagshipResourceJumps(apiData) : []),
+    [apiData],
+  )
+  const resourceJumps = useMemo<Array<ResourceJumpUI>>(
+    () => (apiData ? mapToResouceJumpUis(apiData, flagshipJumpResources) : []),
+    [apiData, flagshipJumpResources],
+  )
+
+  const { history, historySaveFlagmanSwitch, historySaveResourceSwitch } =
+    useResourceJumpHistory()
+
+  // Global state for all late resolvable param values across all resources
+  const [allLateResolvableParamValues, setAllLateResolvableParamValues] =
+    useState<Record<string, string>>({})
+
+  // No local loading effect; quick slots are sourced via React Query
+
+  // Sync currentResourceJumpSlug with URL changes
+  // When the URL changes externally, update our state to match
+  // useEffect(() => {
+  //   setCurrentResourceJumpSlug(resourceJumpLoader.resourceSlug)
+  // }, [resourceJumpLoader.resourceSlug])
+
+  const currentResourceJumpSlug = resourceJumpLoader.resourceSlug
+
+  useEffect(() => {
+    if (resourceJumpLoader.resourceSlug) {
+      historySaveResourceSwitch(resourceJumpLoader.resourceSlug)
+    }
+  }, [historySaveResourceSwitch, resourceJumpLoader.resourceSlug])
+
+  const fixUrlBasedOnSelection = useCallback(
+    async (state: EhUrlParams, _replace = false) => {
+      // Note: Navigation logic commented out - URL sync handled elsewhere
+      void getEhToOptions(state)
+    },
+    [],
+  )
+
+  const setCurrentResourceJumpSlugWithHistory = useCallback(
+    (slug: string | undefined) => {
+      const newLocal = getEhToOptions({
+        appId: slug,
+        envId: currentEnv?.slug,
+        subValue: resourceJumpLoader.subValue,
+      })
+      void navigate({
+        ...newLocal,
+        replace: true,
+      })
+      if (slug !== undefined) {
+        console.log('Saving resource jump switch to history:', slug)
+        historySaveResourceSwitch(slug, currentEnv?.slug)
+      }
+    },
+    [
+      currentEnv?.slug,
+      historySaveResourceSwitch,
+      navigate,
+      resourceJumpLoader.subValue,
+    ],
+  )
+
+  const currentResourceJump = useMemo<ResourceJumpUI | undefined>(() => {
+    const found: ResourceJumpUI | undefined = resourceJumps.find(
+      (item) => item.slug === currentResourceJumpSlug,
+    )
+    return found
+  }, [currentResourceJumpSlug, resourceJumps])
+
+  const { setCrossCuttingParamsDefs } = useCrossCuttingParamsContext()
+  useEffect(() => {
+    setCrossCuttingParamsDefs(apiData?.lateResolvableParams || [])
+  }, [apiData, setCrossCuttingParamsDefs])
+
+  // Derive current late resolvable params for the selected resource
+  const currentLateResolvableParams = useMemo(() => {
+    if (!apiData || !currentResourceJumpSlug) {
+      return []
+    }
+    const resourceJump = apiData.resourceJumps.find(
+      (rj) => rj.slug === currentResourceJumpSlug,
+    )
+    if (!resourceJump?.lateResolvableParamSlugs) {
+      return []
+    }
+    const paramMap = new Map(
+      apiData.lateResolvableParams.map((p) => [p.slug, p]),
+    )
+    return resourceJump.lateResolvableParamSlugs
+      .map((slug) => paramMap.get(slug))
+      .filter((p): p is LateResolvableParam => p !== undefined)
+  }, [currentResourceJumpSlug, apiData])
+
+  // Derive current late resolvable param values for the selected resource
+  const currentLateResolvableParamsValue = useMemo(() => {
+    return currentLateResolvableParams.map((p) => ({
+      slug: p.slug,
+      value: allLateResolvableParamValues[p.slug] ?? '',
+    }))
+  }, [currentLateResolvableParams, allLateResolvableParamValues])
+
+  // Setters for late resolvable params
+  const setLateResolvableParamValue = useCallback(
+    (slug: string, value: string) => {
+      setAllLateResolvableParamValues((prev) => ({
+        ...prev,
+        [slug]: value,
+      }))
+    },
+    [],
+  )
+
+  const setLateResolvableParamValues = useCallback(
+    (values: Record<string, string>) => {
+      setAllLateResolvableParamValues((prev) => ({
+        ...prev,
+        ...values,
+      }))
+    },
+    [],
+  )
+
+  // Initialize late resolvable param value from URL only when env matches initialEnvSlug
+  // This runs once and does not establish ongoing URL->context sync
+  const didInitLateParamFromUrlRef = useRef(false)
+  useEffect(() => {
+    if (didInitLateParamFromUrlRef.current) {
+      return
+    }
+    if (isLoadingResourceJumps) {
+      return
+    }
+    const firstParam = currentLateResolvableParams[0]
+    if (!firstParam) {
+      return
+    }
+    const urlValue = resourceJumpLoader.subValue ?? ''
+    const currentVal = allLateResolvableParamValues[firstParam.slug] ?? ''
+    if (urlValue !== '' && currentVal === '') {
+      setAllLateResolvableParamValues((prev) => ({
+        ...prev,
+        [firstParam.slug]: urlValue,
+      }))
+      didInitLateParamFromUrlRef.current = true
+    }
+  }, [
+    isLoadingResourceJumps,
+    currentLateResolvableParams,
+    allLateResolvableParamValues,
+    resourceJumpLoader.subValue,
+  ])
+
+  useEffect(() => {
+    if (isLoadingResourceJumps) {
+      return
+    }
+    const firstParam = currentLateResolvableParams[0]
+    const localValue =
+      allLateResolvableParamValues[firstParam?.slug || ''] ?? ''
+
+    const params: EhUrlParams = {
+      envId: currentEnv?.slug,
+      appId: currentResourceJumpSlug,
+      subValue: localValue || undefined,
+    }
+
+    // Only navigate if we have at least env and resource
+    void fixUrlBasedOnSelection(params, true)
+  }, [
+    allLateResolvableParamValues,
+    currentLateResolvableParams,
+    currentEnv?.slug,
+    currentResourceJumpSlug,
+    fixUrlBasedOnSelection,
+    isLoadingResourceJumps,
+  ])
+
+  // Handle navigation when environment or resource selection changes
+  // This effect runs when the user makes a selection (not when syncing from URL)
+  useEffect(() => {
+    // Skip if we're still loading
+    if (isLoadingResourceJumps) {
+      return
+    }
+
+    // Skip if state matches URL - this means we just synced from URL, don't navigate
+    const stateMatchesUrl =
+      currentEnv?.slug === resourceJumpLoader.envSlug &&
+      currentResourceJumpSlug === resourceJumpLoader.resourceSlug
+
+    if (stateMatchesUrl) {
+      return
+    }
+
+    const firstParam = currentLateResolvableParams[0]
+    const subValue =
+      firstParam && allLateResolvableParamValues[firstParam.slug]
+        ? allLateResolvableParamValues[firstParam.slug]
+        : undefined
+
+    // If we have both env and resource selected, navigate to full URL
+    if (currentEnv?.slug && currentResourceJumpSlug) {
+      void fixUrlBasedOnSelection(
+        { envId: currentEnv.slug, appId: currentResourceJumpSlug, subValue },
+        true,
+      )
+    }
+    // If we only have env selected (no resource), navigate to env-only URL
+    else if (currentEnv?.slug && !currentResourceJumpSlug) {
+      void fixUrlBasedOnSelection({ envId: currentEnv.slug }, true)
+    }
+  }, [
+    currentEnv,
+    currentResourceJumpSlug,
+    resourceJumpLoader.envSlug,
+    resourceJumpLoader.resourceSlug,
+    allLateResolvableParamValues,
+    currentLateResolvableParams,
+    fixUrlBasedOnSelection,
+    isLoadingResourceJumps,
+  ])
+
+  const { crossCuttingParams } = useCrossCuttingParamsContext()
+
+  const getJumpUrl = useCallback(
+    (
+      jumpResourceSlug: JumpResourceSlug | undefined,
+      envSlug: EnvSlug | undefined,
+    ) => {
+      return buildJumpUrl(
+        jumpResourceSlug,
+        envSlug,
+        apiData,
+        mapValues(crossCuttingParams, (v) => v.stringValue),
+      )
+    },
+    [apiData, crossCuttingParams],
+  )
+
+  const currentFlagship = useMemo(() => {
+    return currentResourceJump?.flagship
+  }, [currentResourceJump])
+
+  const setCurrentFlagship = useCallback(
+    (slug: string | undefined) => {
+      const flagship = flagshipJumpResources.find((rj) => rj.slug === slug)
+
+      if (flagship) {
+        const resouceJump = getFlashipResource(flagship).slug
+        setCurrentResourceJumpSlugWithHistory(resouceJump)
+        if (slug) {
+          historySaveFlagmanSwitch(slug)
+        }
+      }
+    },
+    [
+      flagshipJumpResources,
+      historySaveFlagmanSwitch,
+      setCurrentResourceJumpSlugWithHistory,
+    ],
+  )
+
+  const [leftEnvSelectorValue, setLeftEnvSelectorValue] = useState<string>('')
+
+  const value: ResourceJumpContextIface = useMemo(
+    () => ({
+      currentResourceJump,
+      setCurrentResourceJumpSlug: setCurrentResourceJumpSlugWithHistory,
+      isLoadingResourceJumps,
+      getJumpUrl,
+      initialResourceSlug: resourceJumpLoader.resourceSlug,
+      currentLateResolvableParams,
+      currentLateResolvableParamsValue,
+      setLateResolvableParamValue,
+      setLateResolvableParamValues,
+      flagshipJumpResources,
+      currentFlagship,
+      setCurrentFlagship,
+      leftEnvSelectorValue,
+      setLeftEnvSelectorValue,
+      history,
+      resourceJumps,
+    }),
+    [
+      currentResourceJump,
+      setCurrentResourceJumpSlugWithHistory,
+      isLoadingResourceJumps,
+      getJumpUrl,
+      resourceJumpLoader.resourceSlug,
+      currentLateResolvableParams,
+      currentLateResolvableParamsValue,
+      setLateResolvableParamValue,
+      setLateResolvableParamValues,
+      flagshipJumpResources,
+      currentFlagship,
+      setCurrentFlagship,
+      leftEnvSelectorValue,
+      history,
+      resourceJumps,
+    ],
+  )
+
+  return <ResourceJumpContext value={value}>{children}</ResourceJumpContext>
+}
+
+export function useResourceJumpContext(): ResourceJumpContextIface {
+  const context = use(ResourceJumpContext)
+  if (context === undefined) {
+    throw new Error(
+      'useResourceJumpContext must be used within an ResourceJumpContext',
+    )
+  }
+  return context
+}

package/src/modules/resourceJump/context/useResouceJumpHistory.ts

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { ResourceJumpHistoryItem } from '~/modules/resourceJump/types'
+import { useDb } from '~/userDb/DbContext'
+
+const MAX_HISTORY_ITEMS = 1000
+const DISPLAY_HISTORY_ITEMS = 100
+
+function isSameHistoryItem(
+  a: ResourceJumpHistoryItem,
+  b: Omit<ResourceJumpHistoryItem, 'timestamp'>,
+): boolean {
+  return (
+    a.type === b.type &&
+    a.resourceSlug === b.resourceSlug &&
+    a.envSlug === b.envSlug &&
+    a.flagshipSlug === b.flagshipSlug
+  )
+}
+
+export function useResourceJumpHistory() {
+  const db = useDb()
+
+  const [history, setHistory] = useState<Array<ResourceJumpHistoryItem>>([])
+
+  // Load history on mount
+  useEffect(() => {
+    const fetchHistory = async () => {
+      const historyItems = await db.resourceJumpHistory
+        .toCollection()
+        .sortBy('timestamp')
+      setHistory(historyItems.reverse().slice(0, DISPLAY_HISTORY_ITEMS))
+    }
+    fetchHistory()
+  }, [db.resourceJumpHistory])
+
+  // Trim history if it exceeds MAX_HISTORY_ITEMS
+  const trimHistory = useCallback(async () => {
+    const count = await db.resourceJumpHistory.count()
+    if (count > MAX_HISTORY_ITEMS) {
+      const itemsToDelete = count - MAX_HISTORY_ITEMS
+      const oldestItems = await db.resourceJumpHistory
+        .toCollection()
+        .sortBy('timestamp')
+      const idsToDelete = oldestItems
+        .slice(0, itemsToDelete)
+        .map((item) => item.id)
+        .filter((id): id is number => id !== undefined)
+      await db.resourceJumpHistory.bulkDelete(idsToDelete)
+    }
+  }, [db.resourceJumpHistory])
+
+  const saveHistoryItem = useCallback(
+    async (newItem: Omit<ResourceJumpHistoryItem, 'timestamp'>) => {
+      const timestamp = Date.now()
+      const historyItem: ResourceJumpHistoryItem = {
+        ...newItem,
+        timestamp,
+      }
+
+      // Check if last item is the same (deduplication)
+      const lastItem = history[0]
+      if (lastItem && isSameHistoryItem(lastItem, newItem)) {
+        return
+      }
+
+      // Add new item
+      const id = await db.resourceJumpHistory.add(historyItem)
+      setHistory((prev) => [
+        { ...historyItem, id },
+        ...prev.slice(0, DISPLAY_HISTORY_ITEMS - 1),
+      ])
+
+      // Trim if needed (async, don't await)
+      void trimHistory()
+    },
+    [db.resourceJumpHistory, history, trimHistory],
+  )
+
+  const historySaveEnvSwitch = useCallback(
+    (envSlug: string) => {
+      void saveHistoryItem({
+        type: 'switch-selector',
+        envSlug,
+      })
+    },
+    [saveHistoryItem],
+  )
+
+  const historySaveFlagmanSwitch = useCallback(
+    (flagmanSlug: string) => {
+      void saveHistoryItem({
+        type: 'switch-selector',
+        flagshipSlug: flagmanSlug,
+      })
+    },
+    [saveHistoryItem],
+  )
+
+  const historySaveResourceSwitch = useCallback(
+    (resourceSlug: string, envSlug?: string) => {
+      void saveHistoryItem({
+        type: 'switch-selector',
+        resourceSlug,
+        envSlug,
+      })
+    },
+    [saveHistoryItem],
+  )
+
+  return {
+    history,
+    setHistory,
+    historySaveEnvSwitch,
+    historySaveFlagmanSwitch,
+    historySaveResourceSwitch,
+  }
+}

package/src/modules/resourceJump/routeLoader.ts

@@ -1,10 +1,7 @@
-import { ApiQueryMagazineHistory } from '../environment/ApiQueryMagazineEnvironment'
-import { makePluginInterfaceForCore } from '../pluginCore/makePluginManagerContext'
-import { ApiQueryMagazineResouceJump } from './ApiQueryMagazineResourceJump'
-import { findBestMatchByUrl } from './findBestMatchByUrl'
+import type { QueryFunctionContext } from '@tanstack/react-query'
 import type { EhRouterContext } from '~/types/types'
 import type { ResourceJumpLoaderReturn } from './types'
-import { ApiQueryMagazine } from '~/api/ApiQueryMagazine'
+import { resourceJumpsFetcher } from '~/api/unsorted/resourceJumpsFetcher'
 
 export interface RouteLoaderCtx {
   params: {
@@ -19,40 +16,35 @@ export async function routeLoader({
   params,
   context,
 }: RouteLoaderCtx): Promise<ResourceJumpLoaderReturn> {
-  const [bootstrapConfig, resourceJumps] = await Promise.all([
-    context.queryClient.ensureQueryData(ApiQueryMagazine.getConfig(context)),
-    context.queryClient.ensureQueryData(
-      ApiQueryMagazineResouceJump.getResourceJumps(),
-    ),
-  ])
+  // Try to load cached data from IndexedDB to pre-populate React Query cache
+  const queryFn = resourceJumpsFetcher({
+    db: context.db,
+    trpcClient: context.trpcClient,
+  })
 
-  const pluginInterfaceForCore = makePluginInterfaceForCore(context.plugins)
-  const resourceJumpItems =
-    await pluginInterfaceForCore.getResourceJumpsItems(bootstrapConfig)
+  // Create a minimal context object for the query function
+  const ctx: QueryFunctionContext = {
+    queryKey: ['resourceJumps'],
+    meta: { db: context.db, trpcClient: context.trpcClient },
+    client: context.queryClient,
+    signal: new AbortController().signal,
+  }
 
-  const { env, resourceJump } = await findBestMatchByUrl({
-    urlEnvSlug: params.envSlug,
-    urlAppSlug: params.appSlug,
-    envs: bootstrapConfig.envs,
-    resourceJumps: resourceJumpItems,
-    getEnvHistory: () =>
-      context.queryClient.ensureQueryData(
-        ApiQueryMagazineHistory.getEnvSelectionHistory(context),
-      ),
-    getNameMigrations: (migrationParams) =>
-      context.queryClient.ensureQueryData(
-        ApiQueryMagazineResouceJump.getNameMigration(migrationParams),
-      ),
-    getAvailabilityMatrix: () =>
-      context.queryClient.ensureQueryData(
-        ApiQueryMagazineResouceJump.getAvailabilityMatrix(),
-      ),
-  })
+  // Call the query function to pre-populate cache
+  await queryFn(ctx)
 
   return {
-    envSlug: env?.slug,
-    resourceSlug: resourceJump?.slug,
-    resourceJumps,
-    pluginInterfaceForCore,
+    envSlug: params.envSlug,
+    resourceSlug: params.appSlug
+      ? decodeURIComponent(params.appSlug)
+      : undefined,
+    crossCuttingParams: params.subValue
+      ? [
+          {
+            slug: 'sub-legacy',
+            stringValue: params.subValue,
+          },
+        ]
+      : [],
   }
 }

package/src/modules/resourceJump/types.ts

@@ -1,7 +1,8 @@
-import type { ResourceJumpsData } from '@env-hopper/backend-core'
-import type { PluginInterfaceForCore } from '../pluginCore/makePluginManagerContext'
+import type { ResourceJump } from '@env-hopper/backend-core'
+import type { CrossCuttingLoaderParam } from '~/modules/crossCuttingParams/types'
+import type { FlagshipResourceJumpUi as FlagshipResourceJumpUI } from '~/modules/resourceJump/utils/mapToFlagshipResourceJumps'
 
-export interface ResouceJumpItemParent {
+export interface ResourceJumpItemParent {
   type: string
   displayName: string
   hasSingleChild: boolean
@@ -10,12 +11,30 @@ export interface ResouceJumpItemParent {
 export interface ResourceJumpItem {
   type: string
   slug: string
-  parent?: ResouceJumpItemParent
+  parent?: ResourceJumpItemParent
 }
 
 export interface ResourceJumpLoaderReturn {
   envSlug?: string
   resourceSlug?: string
-  pluginInterfaceForCore: PluginInterfaceForCore
-  resourceJumps: ResourceJumpsData
+  subValue?: string
+  crossCuttingParams: Array<CrossCuttingLoaderParam>
+}
+
+export interface ResourceJumpHistoryItem {
+  id?: number // Auto-generated by Dexie (++id)
+  type: 'switch-selector' | 'external-jump'
+  flagshipSlug?: string
+  resourceSlug?: string
+  envSlug?: string
+  timestamp: number
+}
+
+export interface ResourceJumpUI extends ResourceJump {
+  flagship: FlagshipResourceJumpUI
+}
+
+export interface SlugAndDisplayName {
+  slug: string
+  displayName: string
 }

package/src/modules/resourceJump/ui/AppSwitcher.tsx

@@ -0,0 +1,22 @@
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { SmoothSwitcher } from '~/modules/resourceJump/ui/SmoothSwitcher'
+import { useMostRelevantQuickFlaships } from '~/modules/resourceJump/utils/statistics/useMostRelevantQuickFlagships'
+
+export interface AppSwitcherProps {
+  className?: string
+}
+
+export function AppSwitcher({ className }: AppSwitcherProps) {
+  const { setCurrentFlagship, currentFlagship } = useResourceJumpContext()
+
+  const values = useMostRelevantQuickFlaships()
+
+  return (
+    <SmoothSwitcher
+      values={values}
+      selectedValueSlug={currentFlagship?.slug}
+      onValueSelect={setCurrentFlagship}
+      className={className}
+    />
+  )
+}

package/src/modules/resourceJump/ui/CredentialsWidget.tsx

@@ -0,0 +1,15 @@
+import { Input } from '~/ui/input'
+
+export function CredentialsWidget() {
+  return (
+    <div className="flex flex-col gap-4">
+      <h2 className="text-sm font-semibold text-secondary-foreground/60">
+        Credentials
+      </h2>
+      <div className="flex flex-col gap-2">
+        <Input placeholder="Username" />
+        <Input placeholder="Password" type="password" />
+      </div>
+    </div>
+  )
+}

package/src/modules/resourceJump/ui/EnvSwitcher.tsx

@@ -0,0 +1,17 @@
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { SmoothSwitcher } from '~/modules/resourceJump/ui/SmoothSwitcher'
+import { useMostRelevantQuickEnvs } from '~/modules/resourceJump/utils/statistics/useMostRelevantQuickEnvs'
+
+export function EnvSwitcher() {
+  const { currentEnv, setCurrentEnv } = useEnvironmentContext()
+
+  const values = useMostRelevantQuickEnvs()
+
+  return (
+    <SmoothSwitcher
+      values={values}
+      selectedValueSlug={currentEnv?.slug}
+      onValueSelect={setCurrentEnv}
+    />
+  )
+}