@env-hopper/frontend-core 2.0.1-alpha

package/src/ui/components/AppIcon.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { Package } from 'lucide-react'
+import type { EhAppIndexed } from '@env-hopper/backend-core'
+import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
+
+interface AppIconProps {
+  app: EhAppIndexed
+  className?: string
+}
+
+export function AppIcon({ app, className = 'w-4 h-4' }: AppIconProps) {
+  const { appsMeta } = useBootstrapConfig()
+  const [imageError, setImageError] = useState(false)
+
+  const handleImageError = () => {
+    setImageError(true)
+  }
+
+  // Determine icon source with fallback chain:
+  // 1. app.iconName -> /static/icon/${iconName}
+  // 2. indexData.appsMeta.defaultIcon -> /static/icon/${defaultIcon}
+  // 3. Package icon (default)
+  const getIconSrc = (): string | null => {
+    if (app.iconName) {
+      return `/static/icon/${app.iconName}`
+    }
+    if (appsMeta.defaultIcon) {
+      return `/static/icon/${appsMeta.defaultIcon}`
+    }
+    return null
+  }
+
+  const iconSrc = getIconSrc()
+
+  // Use icon if available and no error, otherwise fallback to Package icon
+  if (iconSrc && !imageError) {
+    return (
+      <img
+        src={iconSrc}
+        alt={`${app.displayName} icon`}
+        className={className}
+        onError={handleImageError}
+      />
+    )
+  }
+
+  return <Package className={className} />
+}

package/src/ui/components/commandInput/EhBaseSelector.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Popover } from '~/components/ui/popover'
+import { cn } from '~/lib/utils'
+
+export function EhBaseSelectorRoot({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={cn(
+        `flex flex-col gap-1 duration-100 transition-all`,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export function EhBaseSelectorLabel({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={cn(`text-secondary-foreground/50 text-sm`, className)}
+      {...props}
+    />
+  )
+}
+
+export function EhBaseSelectorPopover({
+  ...props
+}: React.ComponentPropsWithoutRef<typeof Popover>) {
+  return <Popover {...props} />
+}
+
+export function EhBaseSelectorCommand({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={cn(
+        'hover:cursor-text hover:bg-accent hover:border-neutral-950 rounded-sm border-1 p-3 group',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/ui/components/commandInput/types.ts

@@ -0,0 +1,22 @@
+import type { BaseAutoCompletableItem } from '~/modules/pluginCore/types'
+
+export interface SpecialAutoCompleteItem {
+  type: 'special'
+  slug: 'specia-all-apps'
+}
+
+export function isSpecialAutoCompleteItem(
+  item: BaseAutoCompletableItem | SpecialAutoCompleteItem | null | undefined,
+): item is SpecialAutoCompleteItem {
+  return item?.type === 'special'
+}
+
+export type AutoCompleteItem = BaseAutoCompletableItem | SpecialAutoCompleteItem
+
+export interface AppAutoCompleteAmend {
+  isChild?: boolean
+}
+
+export interface AutoCompleteContext {
+  searchString: string
+}

package/src/ui/components/contextDebug.tsx

@@ -0,0 +1,13 @@
+import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/ResourceJumpContext'
+
+const ContextDebug: React.FC = () => {
+  const { currentResourceJump } = useResourceJumpContext()
+  const { currentEnv } = useEnvironmentContext()
+
+  return (
+    <pre>{JSON.stringify({ currentResourceJump, currentEnv }, null, 2)}</pre>
+  )
+}
+
+export default ContextDebug

package/src/ui/components/controlPanel/BaseDropdownSelector.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+import { useCombobox } from 'downshift'
+import type { ReactNode } from 'react'
+import type { BaseDropdownContentProps } from '~/types/ehTypes'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+
+interface BaseDropdownSelectorProps {
+  value?: string
+  placeholder: string
+  onSelect: (value: string) => void
+  children: (props: BaseDropdownContentProps) => ReactNode
+  className?: string
+}
+
+interface DropdownInputProps {
+  value?: string
+  placeholder: string
+  onSelect: (value: string) => void
+  onClose: () => void
+  children: (props: BaseDropdownContentProps) => ReactNode
+  className?: string
+}
+
+function DropdownInput({
+  value,
+  placeholder,
+  onSelect,
+  onClose,
+  children,
+  className = '',
+}: DropdownInputProps) {
+  const [isUntouched, setIsUntouched] = useState(true)
+  const [inputValue, setInputValue] = useState(value || '')
+
+  const {
+    isOpen,
+    getMenuProps,
+    getInputProps,
+    getItemProps,
+    highlightedIndex,
+    // closeMenu,
+  } = useCombobox({
+    inputValue,
+    isOpen: true, // Always open when this component is rendered
+    onInputValueChange: ({ inputValue: newInputValue }) => {
+      console.log('✏️ Input value changed:', newInputValue)
+      setInputValue(newInputValue || '')
+      setIsUntouched(false)
+    },
+    // onSelectedItemChange: ({ selectedItem: changedSelectedItem }) => {
+    //   if (changedSelectedItem !== null) {
+    //     console.log('✅ Item selected:', changedSelectedItem)
+    //     onSelect(changedSelectedItem)
+    //     closeMenu()
+    //     onClose()
+    //   }
+    // },
+    onIsOpenChange: ({ isOpen: newIsOpen }) => {
+      console.log('📋 Combobox open change:', newIsOpen)
+      if (newIsOpen === false) {
+        console.log('📋 Combobox closed, closing dropdown')
+        onClose()
+      }
+    },
+    items: [], // We'll handle items in the children component
+  })
+
+  // Handle input blur
+  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    console.log('🔄 Input blur', {
+      relatedTarget: e.relatedTarget,
+      currentTarget: e.currentTarget,
+      target: e.target,
+    })
+    // Let Downshift handle the blur behavior
+  }
+
+  // Handle input focus
+  const handleInputFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    console.log('🎯 Input focused', e.target)
+  }
+
+  return (
+    <div className="relative">
+      <Input
+        {...getInputProps({
+          onBlur: handleInputBlur,
+          onFocus: handleInputFocus,
+          placeholder,
+          className: `min-w-[200px] ${className}`,
+          autoFocus: true,
+        })}
+      />
+      {isOpen && (
+        <div
+          {...getMenuProps()}
+          className="absolute top-full left-0 mt-1 min-w-[300px] bg-popover border border-border rounded-md shadow-md z-50"
+        >
+          {children({
+            searchValue: inputValue,
+            onSelect: (selectedValue: string) => {
+              console.log('✅ Child component selected:', selectedValue)
+              onSelect(selectedValue)
+              onClose()
+            },
+            getMenuProps,
+            getItemProps,
+            highlightedIndex,
+            isOpen,
+            isUntouched,
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function BaseDropdownSelector({
+  value,
+  placeholder,
+  onSelect,
+  children,
+  className = '',
+}: BaseDropdownSelectorProps) {
+  const [isInputMode, setIsInputMode] = useState(false)
+
+  // Handle button click - switch to input mode
+  const handleButtonClick = () => {
+    console.log('🔘 Button clicked')
+    setIsInputMode(true)
+  }
+
+  const handleClose = () => {
+    setIsInputMode(false)
+  }
+
+  if (isInputMode) {
+    return (
+      <DropdownInput
+        value={value}
+        placeholder={placeholder}
+        onSelect={onSelect}
+        onClose={handleClose}
+        className={className}
+      >
+        {children}
+      </DropdownInput>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="default"
+      className={`px-4 font-normal ${className} min-w-[15ch]`}
+      onClick={handleButtonClick}
+      type="button"
+    >
+      {value || placeholder}
+    </Button>
+  )
+}

package/src/ui/components/controlPanel/env/EnvDropdownContent.tsx

@@ -0,0 +1,114 @@
+import { Server } from 'lucide-react'
+import type { BaseDropdownContentProps, EhEnvIndexed } from '~/types/ehTypes'
+import { Badge } from '~/components/ui/badge'
+import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
+
+interface EnvDropdownContentProps extends BaseDropdownContentProps {}
+
+export function EnvDropdownContent({
+  searchValue = '',
+  onSelect,
+  getItemProps,
+  highlightedIndex = -1,
+  isUntouched,
+}: EnvDropdownContentProps) {
+  const indexData = useBootstrapConfig()
+  const listEnvs = Object.values(indexData.envs)
+
+  // Filter environments based on search value
+  const filteredEnvs = listEnvs.filter((env) => {
+    if (isUntouched) {
+      return true
+    }
+    return (
+      env.displayName.toLowerCase().includes(searchValue.toLowerCase()) ||
+      env.slug.toLowerCase().includes(searchValue.toLowerCase())
+    )
+  })
+
+  // Get environment type for styling
+  const getEnvType = (slug: string) => {
+    if (slug.includes('prod')) return 'production'
+    if (slug.includes('preprod') || slug.includes('staging')) return 'staging'
+    if (slug.includes('dev') || slug.includes('int')) return 'development'
+    return 'other'
+  }
+
+  // Get badge variant based on environment type
+  const getBadgeVariant = (type: string) => {
+    switch (type) {
+      case 'production':
+        return 'destructive'
+      case 'staging':
+        return 'secondary'
+      case 'development':
+        return 'default'
+      default:
+        return 'outline'
+    }
+  }
+
+  // Get environment color
+  const getEnvColor = (slug: string) => {
+    if (slug.startsWith('cross')) return 'text-blue-600'
+    if (slug.startsWith('preprod')) return 'text-orange-600'
+    if (slug.startsWith('g64')) return 'text-violet-600'
+    return 'text-gray-600'
+  }
+
+  const handleEnvSelect = (env: EhEnvIndexed) => {
+    if (onSelect) {
+      onSelect(env.slug)
+    }
+  }
+
+  if (filteredEnvs.length === 0) {
+    return (
+      <div className="p-4 text-center text-muted-foreground">
+        No environments found for "{searchValue}"
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-h-[300px] overflow-y-auto">
+      {filteredEnvs.map((env, index) => {
+        const envType = getEnvType(env.slug)
+        const isHighlighted = highlightedIndex === index
+
+        return (
+          <div
+            key={env.slug}
+            {...(getItemProps
+              ? getItemProps({
+                  item: env.slug,
+                  index,
+                  onClick: () => handleEnvSelect(env),
+                })
+              : {})}
+            className={`flex items-center justify-between p-3 cursor-pointer transition-colors ${
+              isHighlighted
+                ? 'bg-accent text-accent-foreground'
+                : 'hover:bg-accent hover:text-accent-foreground'
+            }`}
+          >
+            <div className="flex items-center gap-3">
+              <Server className="h-4 w-4 text-muted-foreground" />
+              <div className="flex flex-col">
+                <span className={`font-medium ${getEnvColor(env.slug)}`}>
+                  {env.displayName}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {env.slug}
+                </span>
+              </div>
+            </div>
+            <Badge variant={getBadgeVariant(envType)} className="text-xs">
+              {envType}
+            </Badge>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/ui/components/controlPanel/env/EnvDropdownSelector.tsx

@@ -0,0 +1,21 @@
+import { BaseDropdownSelector } from '../BaseDropdownSelector'
+import { EnvDropdownContent } from './EnvDropdownContent'
+import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
+
+export function EnvDropdownSelector() {
+  const { currentEnv, setCurrentEnv } = useEnvironmentContext()
+
+  const handleSelect = (envSlug: string) => {
+    setCurrentEnv(envSlug)
+  }
+
+  return (
+    <BaseDropdownSelector
+      value={currentEnv?.displayName}
+      placeholder="Select Env"
+      onSelect={handleSelect}
+    >
+      {(props) => <EnvDropdownContent {...props} />}
+    </BaseDropdownSelector>
+  )
+}

package/src/ui/components/error/DefaultErrorComponent.tsx

@@ -0,0 +1,38 @@
+import type { ErrorComponentProps } from '@tanstack/react-router'
+
+export function DefaultErrorComponent({ error }: ErrorComponentProps) {
+  //   const { data: config } = useQuery(ApiQueryMagazine.getConfig());
+  //   const [localAppVersion] = useLocalStorage(
+  //     LOCAL_STORAGE_KEY_VERSION,
+  //     undefined,
+  //   );
+  //   const { isDegraded } = useEhServerSync();
+  //   const configAppVersion = config?.appVersion;
+  //   const [somethingIsWrong, setSomethingIsWrong] = useState(false);
+  //   useEffect(() => {
+  //     const t = setTimeout(() => {
+  //       setSomethingIsWrong(true);
+  //     }, 25000);
+  //     return () => {
+  //       clearTimeout(t);
+  //     };
+  //   }, []);
+
+  //   const isProbablyWillResolvedAfterUpdate =
+  //     localAppVersion !== undefined &&
+  //     configAppVersion !== undefined &&
+  //     localAppVersion !== configAppVersion &&
+  //     !somethingIsWrong &&
+  //     !isDegraded;
+
+  return (
+    <>
+      <div className={'mt-8 text-center !max-w-none'} role="alert">
+        <h1>Oops!</h1>
+        <p>Sorry, an unexpected error has occurred. :( </p>
+        <pre className={'text-left mt-8 text-sm'}>{<i>{error.message}</i>}</pre>
+        <pre className={'text-left mt-8 text-sm'}>{<i>{error.stack}</i>}</pre>
+      </div>
+    </>
+  )
+}

package/src/ui/components/error/RooutErrorPage.tsx

@@ -0,0 +1,10 @@
+import { DefaultErrorComponent } from './DefaultErrorComponent'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+
+export function RooutErrorPage(props: ErrorComponentProps) {
+  return (
+    <div className="p-5">
+      <DefaultErrorComponent {...props} />;
+    </div>
+  )
+}

package/src/ui/components/footer/Footer.tsx

@@ -0,0 +1,32 @@
+import { ExternalLink } from 'lucide-react'
+
+export function Footer() {
+  return (
+    <footer className="mt-auto border-t border-border bg-background/50 backdrop-blur-sm">
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-center text-sm text-muted-foreground">
+          <span>Built with</span>
+          <a
+            href="https://ui.shadcn.com/docs/components"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="ml-1 inline-flex items-center gap-1 text-primary hover:text-primary/80 transition-colors font-medium"
+          >
+            shadcn/ui
+            <ExternalLink className="h-3 w-3" />
+          </a>
+          <span className="mx-2">•</span>
+          <a
+            href="https://lucide.dev/icons/expand"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-primary hover:text-primary/80 transition-colors font-medium"
+          >
+            Lucide Icons
+            <ExternalLink className="h-3 w-3" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  )
+}

package/src/ui/components/header/PlaygroundHeader.tsx

@@ -0,0 +1,26 @@
+import { Button } from '~/components/ui/button'
+import { ThemeSwitcher } from '~/components/ThemeSwitcher'
+import EnvHopperLogo from '~/assets/env-hopper-logo.svg?react'
+
+export function PlaygroundHeader() {
+  return (
+    <div className="flex items-center justify-between mb-4">
+      {/* Left side: Logo + Mode */}
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2">
+          <EnvHopperLogo className="h-16 w-16" />
+          <h1 className="text-lg font-bold">Env‑Hopper</h1>
+        </div>
+        <span className="text-xs text-muted-foreground">Jump</span>
+      </div>
+
+      {/* Right side: Theme switcher + Login */}
+      <div className="flex items-center gap-3">
+        <ThemeSwitcher />
+        <Button size="sm" variant={'outline'}>
+          Login
+        </Button>
+      </div>
+    </div>
+  )
+}