@env-hopper/frontend-core 2.0.1-alpha

package/src/index.css

@@ -0,0 +1,211 @@
+/* @import url(./modules/resourceJump/ui/JumpMainButton.css); */
+@import 'tailwindcss';
+
+/* @import 'tw-animate-css'; */
+
+@layer base {
+  :root {
+    --background: oklch(0.9842 0.0034 247.8575);
+    --foreground: oklch(0.2795 0.0368 260.031);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.2795 0.0368 260.031);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.2795 0.0368 260.031);
+    --primary: oklch(0.5854 0.2041 277.1173);
+    --primary-foreground: oklch(1 0 0);
+    --secondary: oklch(0.9276 0.0058 264.5313);
+    --secondary-foreground: oklch(0.3729 0.0306 259.7328);
+    --muted: oklch(0.967 0.0029 264.5419);
+    --muted-foreground: oklch(0.551 0.0234 264.3637);
+    --accent: oklch(0.9299 0.0334 272.7879);
+    --accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(1 0 0);
+    --border: oklch(0.8717 0.0093 258.3382);
+    --input: oklch(0.8717 0.0093 258.3382);
+    --ring: oklch(0.5854 0.2041 277.1173);
+    --chart-1: oklch(0.5854 0.2041 277.1173);
+    --chart-2: oklch(0.5106 0.2301 276.9656);
+    --chart-3: oklch(0.4568 0.2146 277.0229);
+    --chart-4: oklch(0.3984 0.1773 277.3662);
+    --chart-5: oklch(0.3588 0.1354 278.6973);
+    --sidebar: oklch(0.967 0.0029 264.5419);
+    --sidebar-foreground: oklch(0.2795 0.0368 260.031);
+    --sidebar-primary: oklch(0.5854 0.2041 277.1173);
+    --sidebar-primary-foreground: oklch(1 0 0);
+    --sidebar-accent: oklch(0.9299 0.0334 272.7879);
+    --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
+    --sidebar-border: oklch(0.8717 0.0093 258.3382);
+    --sidebar-ring: oklch(0.5854 0.2041 277.1173);
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: Merriweather, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+    --tracking-normal: 0em;
+    --spacing: 0.25rem;
+    --hopper: oklch(0.7488 0.149 130.38);
+    --animation-btn: 0.25s;
+    --btn-focus-scale: 0.95;
+  }
+
+  /* https://tweakcn.com/editor/theme */
+  .dark {
+    --background: hsl(212.29deg 18.32% 13.93%);
+    --foreground: oklch(0.9288 0.0126 255.5078);
+    --card: oklch(0.2795 0.0368 260.031);
+    --card-foreground: oklch(0.9288 0.0126 255.5078);
+    --popover: oklch(0.2795 0.0368 260.031);
+    --popover-foreground: oklch(0.9288 0.0126 255.5078);
+    --primary: oklch(0.6801 0.1583 276.9349);
+    --primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --secondary: oklch(0.3351 0.0331 260.912);
+    --secondary-foreground: oklch(0.8717 0.0093 258.3382);
+    --muted: oklch(0.2795 0.0368 260.031);
+    --muted-foreground: oklch(0.7137 0.0192 261.3246);
+    --accent: oklch(0.3729 0.0306 259.7328);
+    --accent-foreground: oklch(0.8717 0.0093 258.3382);
+    --destructive: oklch(0.6368 0.2078 25.3313);
+    --destructive-foreground: oklch(0.2077 0.0398 265.7549);
+    --border: oklch(0.4461 0.0263 256.8018);
+    --input: oklch(0.4461 0.0263 256.8018);
+    --ring: oklch(0.6801 0.1583 276.9349);
+    --chart-1: oklch(0.6801 0.1583 276.9349);
+    --chart-2: oklch(0.5854 0.2041 277.1173);
+    --chart-3: oklch(0.5106 0.2301 276.9656);
+    --chart-4: oklch(0.4568 0.2146 277.0229);
+    --chart-5: oklch(0.3984 0.1773 277.3662);
+    --sidebar: oklch(0.2795 0.0368 260.031);
+    --sidebar-foreground: oklch(0.9288 0.0126 255.5078);
+    --sidebar-primary: oklch(0.6801 0.1583 276.9349);
+    --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
+    --sidebar-accent: oklch(0.3729 0.0306 259.7328);
+    --sidebar-accent-foreground: oklch(0.8717 0.0093 258.3382);
+    --sidebar-border: oklch(0.4461 0.0263 256.8018);
+    --sidebar-ring: oklch(0.6801 0.1583 276.9349);
+    --font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+      'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-serif: Merriweather, serif;
+    --font-mono:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace;
+    --radius: 0.5rem;
+    --shadow-2xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-xs: 0px 4px 8px -1px hsl(0 0% 0% / 0.05);
+    --shadow-sm:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 1px 2px -2px hsl(0 0% 0% / 0.1);
+    --shadow-md:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 2px 4px -2px hsl(0 0% 0% / 0.1);
+    --shadow-lg:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 4px 6px -2px hsl(0 0% 0% / 0.1);
+    --shadow-xl:
+      0px 4px 8px -1px hsl(0 0% 0% / 0.1), 0px 8px 10px -2px hsl(0 0% 0% / 0.1);
+    --shadow-2xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.25);
+
+    --highlight: var(--color-amber-900);
+    --hopper: oklch(0.7488 0.149 130.38);
+    --animation-btn: 0.25s;
+    --btn-focus-scale: 0.95;
+  }
+}
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow: var(--shadow);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
+
+  --color-highlight: var(--highlight);
+  --color-hopper: var(--hopper);
+
+  --animate-button-pop: button-pop var(--animation-btn, 0.25s) ease-out;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@keyframes button-pop {
+  0% {
+    transform: scale(var(--btn-focus-scale, 0.98));
+  }
+
+  40% {
+    transform: scale(1.02);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/src/index.tsx

@@ -0,0 +1,3 @@
+export { appPropsFactory } from './appPropsFactory.js'
+export { App } from './App'
+export type { AppProps } from './App'

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,53 @@
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+// import { registerSW } from 'virtual:pwa-register';
+import './index.css'
+import { createBrowserHistory } from '@tanstack/react-router'
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import { EhDb as DbClass } from './userDb/EhDb'
+import { PageUrlJumpPlugin } from './plugins/builtin/pageUrl/pageUrlJumpPlugin'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { EhPlugin } from './modules/pluginCore/types'
+import { createEhRouter } from '~/util/createEhRouter'
+import { createQueryClient } from '~/api/infra/createQueryClient'
+import { App } from '~/App'
+
+// registerSW();
+
+const trpcClient = createTRPCClient<TRPCRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:4000/trpc',
+    }),
+  ],
+})
+
+const db = new DbClass()
+const queryClient = createQueryClient({ trpcClient })
+const plugins: Array<EhPlugin> = [new PageUrlJumpPlugin()]
+const router = createEhRouter({
+  history: createBrowserHistory(),
+  context: {
+    queryClient,
+    trpcClient,
+    db,
+    plugins,
+  },
+})
+
+// Render the app
+
+const rootElement = document.getElementById('root')!
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <App
+        router={router}
+        queryClient={queryClient}
+        trpcClient={trpcClient}
+        db={db}
+      />
+    </StrictMode>,
+  )
+}

package/src/modules/config/BootstrapConfigContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, use } from 'react'
+import type { ReactNode } from 'react'
+import type { BootstrapConfigData } from '@env-hopper/backend-core'
+
+const BootstrapConfigContext = createContext<BootstrapConfigData | undefined>(
+  undefined,
+)
+
+interface BootstrapConfigProviderProps {
+  children: ReactNode
+  bootstrapConfig: BootstrapConfigData
+}
+
+export function BootstrapConfigProvider({
+  children,
+  bootstrapConfig,
+}: BootstrapConfigProviderProps) {
+  return (
+    <BootstrapConfigContext value={bootstrapConfig}>
+      {children}
+    </BootstrapConfigContext>
+  )
+}
+
+export function useBootstrapConfig(): BootstrapConfigData {
+  const context = use(BootstrapConfigContext)
+  if (context === undefined) {
+    throw new Error(
+      'useBootstrapConfig must be used within a BootstrapConfigProvider',
+    )
+  }
+  return context
+}

package/src/modules/config/GlobalConfigContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, use, useMemo } from 'react'
+import type { ReactNode } from 'react'
+
+interface FrontendConfig {
+  microinteractionsToKeep: number
+  searchHistoryToKeep: number
+}
+
+export interface GlobalConfigContext {
+  config: FrontendConfig
+}
+
+const GlobalConfigContext = createContext<GlobalConfigContext | undefined>(
+  undefined,
+)
+
+interface GlobalConfigProviderProps {
+  children: ReactNode
+}
+
+export function GlobalConfigProvider({ children }: GlobalConfigProviderProps) {
+  const value: GlobalConfigContext = useMemo(
+    () => ({
+      config: {
+        microinteractionsToKeep: 1000,
+        searchHistoryToKeep: 1000,
+      },
+    }),
+    [],
+  )
+  return <GlobalConfigContext value={value}>{children}</GlobalConfigContext>
+}
+
+export function useGlobalConfig(): GlobalConfigContext {
+  const context = use(GlobalConfigContext)
+  if (context === undefined) {
+    throw new Error(
+      'useGlobalConfig must be used within a GlobalConfigProvider',
+    )
+  }
+  return context
+}

package/src/modules/environment/ApiQueryMagazineEnvironment.ts

@@ -0,0 +1,12 @@
+import { queryOptions } from '@tanstack/react-query'
+import type { DbAware } from '~/types/ehTypes'
+import type { EnvironmentHistoryItem } from './types'
+
+export class ApiQueryMagazineHistory {
+  static getEnvSelectionHistory({ db }: DbAware) {
+    return queryOptions<Array<EnvironmentHistoryItem>, Error>({
+      queryKey: ['envSelectionHistory'],
+      queryFn: () => db.environmentHistory.toArray(),
+    })
+  }
+}

package/src/modules/environment/EnvironmentContext.tsx

@@ -0,0 +1,115 @@
+import {
+  createContext,
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useBootstrapConfig } from '../config/BootstrapConfigContext'
+import type { EhEnvIndexed } from '@env-hopper/backend-core'
+import type { ReactNode } from 'react'
+import type { EnvironmentHistoryItem } from './types'
+import { useDb } from '~/userDb/DbContext'
+
+export interface EnvironmentContext {
+  setCurrentEnv: (envSlug: string | undefined) => void
+  currentEnv: EhEnvIndexed | undefined
+  getHistory: () => Array<EnvironmentHistoryItem>
+}
+
+const EnvironmentContext = createContext<EnvironmentContext | undefined>(
+  undefined,
+)
+
+interface EnvironmentProviderProps {
+  children: ReactNode
+  initialEnvSlug?: string
+}
+
+export function EnvironmentProvider({
+  children,
+  initialEnvSlug,
+}: EnvironmentProviderProps) {
+  const indexData = useBootstrapConfig()
+  const db = useDb()
+  const [history, setHistory] = useState<Array<EnvironmentHistoryItem>>([])
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      const historyItems = await db.environmentHistory
+        .toCollection()
+        .sortBy('timestamp')
+      setHistory(historyItems)
+    }
+    fetchHistory()
+  }, [db.environmentHistory])
+
+  const [currentEnvSlug, setCurrentEnvSlug] = useState<string | undefined>(
+    initialEnvSlug,
+  )
+
+  // Lookup functions
+  const findEnvBySlug = useCallback(
+    (envSlug: string | undefined): EhEnvIndexed | undefined => {
+      if (!envSlug) return undefined
+      return indexData.envs[envSlug]
+    },
+    [indexData.envs],
+  )
+
+  // Get current objects from slugs
+  const currentEnv = findEnvBySlug(currentEnvSlug)
+  const setCurrentEnv = useCallback(
+    (envSlug: string | undefined) => {
+      setCurrentEnvSlug(envSlug)
+      const timestamp = Date.now()
+      if (envSlug !== undefined) {
+        setHistory((prev) => [...prev, { envSlug, timestamp }])
+        db.environmentHistory.add({ envSlug, timestamp })
+      }
+    },
+    [db.environmentHistory],
+  )
+
+  const value: EnvironmentContext = useMemo(
+    () => ({
+      setCurrentEnv,
+      currentEnv,
+      getHistory: () => history,
+    }),
+    [currentEnv, setCurrentEnv, history],
+  )
+
+  //   return (
+  //     <EnvironmentContext value={value}></EnvironmentContext>
+  //       recents: history,
+  //       record: (envSlug: string) => {
+  //         const timestamp = Date.now();
+  //         setHistory((prev) => [...prev, { envSlug, timestamp }]);
+  //       },
+  //     },
+  //   }), [currentEnv, setCurrentEnv, history]);
+
+  //   return (
+  //     <EnvironmentContext value={value}></EnvironmentContext>
+  //       recents: [],
+  //       record: (envSlug: string) => {
+  //         const timestamp = Date.now();
+  //         envHistory.recents.push({ envSlug, timestamp });
+  //       },
+  //     },
+  //   }), [currentEnv, setCurrentEnv]);
+
+  return <EnvironmentContext value={value}>{children}</EnvironmentContext>
+}
+
+export function useEnvironmentContext(): EnvironmentContext {
+  const context = use(EnvironmentContext)
+  if (context === undefined) {
+    throw new Error(
+      'useEnvironmentContext must be used within an EnvironmentProvider',
+    )
+  }
+  return context
+}

package/src/modules/environment/types.ts

@@ -0,0 +1,4 @@
+export interface EnvironmentHistoryItem {
+  envSlug: string
+  timestamp: number
+}

package/src/modules/environment/ui/EhEnvSelector.tsx

@@ -0,0 +1,191 @@
+import { Popover, PopoverContent } from '@radix-ui/react-popover'
+import { useCombobox } from 'downshift'
+import { Edit3Icon, XIcon } from 'lucide-react'
+import { listify, unique } from 'radashi'
+import React, { useEffect, useMemo } from 'react'
+import { EhBaseSelectorRoot } from '../../../ui/components/commandInput/EhBaseSelector'
+import { PopoverTrigger } from '~/components/ui/popover'
+import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
+import { cn } from '~/lib/utils'
+import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
+import {
+  fuzzySearch,
+  makeFuzzySearchIndex,
+} from '~/modules/fuzzyMatchLogic/autoCompleteFilter'
+
+interface EhEnvSelectorProps {
+  className?: string
+}
+
+export interface EhEnvSelectorItem {
+  slug: string
+  displayName: string
+}
+
+export function EhEnvSelector({ className = '' }: EhEnvSelectorProps) {
+  const { envs } = useBootstrapConfig()
+  const { currentEnv, setCurrentEnv } = useEnvironmentContext()
+
+  const allItems = useMemo(
+    () =>
+      listify(envs, (_, e) => {
+        return {
+          slug: e.slug,
+          displayName: e.displayName,
+        }
+      }),
+    [envs],
+  )
+
+  const searchIndex = useMemo(() => {
+    return makeFuzzySearchIndex({
+      entries: allItems,
+    })
+  }, [allItems])
+
+  const [displayedItems, setDisplayedItems] =
+    React.useState<Array<EhEnvSelectorItem>>(allItems)
+
+  const envFilter = (needle: string) => {
+    if (needle.trim() === '') {
+      return allItems
+    }
+    const newLocal = fuzzySearch(needle, {
+      index: searchIndex,
+    })
+    console.log(needle, newLocal)
+
+    return newLocal.map((e) => e.entry)
+  }
+
+  const {
+    isOpen: comboIsOpen,
+    getLabelProps,
+    getMenuProps,
+    getInputProps,
+    getToggleButtonProps,
+    highlightedIndex,
+    getItemProps,
+    selectItem,
+    inputValue: comboInputValue,
+    setInputValue,
+  } = useCombobox<EhEnvSelectorItem>({
+    onInputValueChange({
+      inputValue: changedInputValue,
+      isOpen: changedIsOpen,
+    }) {
+      if (changedIsOpen) {
+        const matchedIds = unique(envFilter(changedInputValue))
+        setDisplayedItems(matchedIds)
+      }
+    },
+    onSelectedItemChange({ selectedItem: changedSelectedItem }) {
+      setCurrentEnv(changedSelectedItem?.slug)
+    },
+    // selectedItem,
+    items: displayedItems,
+    itemToString(item) {
+      return (item && item.displayName) || ''
+    },
+  })
+
+  useEffect(() => {
+    if (currentEnv) {
+      const f = allItems.find((e) => e.slug === currentEnv.slug)
+      if (f) {
+        selectItem(f)
+      }
+    }
+  }, [allItems, currentEnv, selectItem])
+
+  return (
+    <EhBaseSelectorRoot className={className}>
+      <Popover open={comboIsOpen}>
+        <PopoverTrigger asChild>
+          <div className="relative group hover:cursor-pointer w-full">
+            <input
+              className={cn(
+                'text-xl h-14 w-full rounded-md border border-input bg-background px-4 py-4 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ',
+                'group-hover:border-secondary-foreground/60 group-hover:bg-secondary/30 focus:bg-secondary/30 focus:border-secondary-foreground/60',
+                'pr-12 hover:cursor-pointer duration-300',
+              )}
+              {...getInputProps({
+                onMouseUp: (e) => {
+                  const userHasSelectedSomeText =
+                    e.currentTarget.selectionStart !==
+                    e.currentTarget.selectionEnd
+                  if (!userHasSelectedSomeText) {
+                    // setInputValue('asdads')
+                    e.currentTarget.select()
+                  }
+                },
+                onKeyUp: (e) => {
+                  if (e.key !== 'Enter') {
+                    // console.log(e.target.value)
+                    // setLastUsersInputText(e.target.value)
+                  }
+                },
+              })}
+            />
+            {comboInputValue.length ? (
+              <XIcon
+                className="absolute right-5 top-1/2 -translate-y-1/2  stroke-secondary-foreground/50 group-hover:stroke-secondary-foreground/60 group-hover:rotate-3 group-hover:scale-95 hover:stroke-secondary-foreground hover:bg-secondary rounded-full"
+                onClick={() => setInputValue('')}
+              />
+            ) : (
+              <Edit3Icon
+                {...getToggleButtonProps()}
+                className="absolute right-5 top-1/2 -translate-y-1/2  stroke-secondary-foreground/50 group-hover:stroke-secondary-foreground/60 group-hover:rotate-3 group-hover:scale-95"
+              />
+            )}
+
+            <label
+              className={cn(
+                'absolute text-sm text-secondary-foreground/50',
+                'left-2 -top-0.5 -translate-y-1/2 text-muted-foreground bg-background rounded-2xl px-1',
+              )}
+              {...getLabelProps()}
+            >
+              Environment
+            </label>
+          </div>
+        </PopoverTrigger>
+
+        <PopoverContent
+          className={cn(
+            'w-[var(--radix-popover-trigger-width)] max-h-[var(--radix-popover-content-available-height)] bg-popover text-popover-foreground z-50 origin-(--radix-popover-content-transform-origin) rounded-b-md border shadow-md outline-hidden',
+            { hidden: !comboIsOpen },
+          )}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          forceMount
+        >
+          <div {...getMenuProps()}>
+            {displayedItems.map((item, index) => (
+              <div
+                key={item.slug}
+                className={cn(
+                  'cursor-pointer text-secondary-foreground px-3 py-3 rounded-md',
+                  {
+                    // 'bg-secondary/40': comboSelectedItem?.slug === item.slug,
+                    'bg-primary/40': highlightedIndex === index,
+                  },
+                )}
+                {...getItemProps({
+                  item,
+                })}
+              >
+                {item.displayName}
+              </div>
+            ))}
+            {displayedItems.length === 0 && (
+              <div className="text-secondary-foreground/50">
+                '{comboInputValue}' not found. Try a different search.
+              </div>
+            )}
+          </div>
+        </PopoverContent>
+        {/* </PopoverAnchor> */}
+      </Popover>
+    </EhBaseSelectorRoot>
+  )
+}