@env-hopper/frontend-core 2.0.1-alpha → 2.0.1-alpha-20260224145405

package/src/ui/command.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+import { Command as CommandPrimitive } from 'cmdk'
+import { SearchIcon } from 'lucide-react'
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '~/ui/dialog'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  commandProps,
+  position = 'center',
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+  commandProps?: React.ComponentProps<typeof Command>
+  position?: 'center' | 'top'
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          'overflow-hidden p-0',
+          position === 'top' && 'top-[10%] translate-y-0',
+          className,
+        )}
+        showCloseButton={showCloseButton}
+      >
+        <Command
+          className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
+          {...commandProps}
+        >
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+    Command,
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut
+}
+

package/src/ui/components/ActionCard.tsx

@@ -1,6 +1,6 @@
-import { AppIcon } from './AppIcon'
 import type { EhAppIndexed } from '@env-hopper/backend-core'
-import { Button } from '~/components/ui/button'
+import { Button } from '~/ui/button'
+import { AppIcon } from './AppIcon'
 
 interface ActionCardProps {
   app: EhAppIndexed

package/src/ui/components/AppIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Package } from 'lucide-react'
 import type { EhAppIndexed } from '@env-hopper/backend-core'
-import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
+// import { useBootstrapConfig } from '~/modules/config/BootstrapConfigContext'
 
 interface AppIconProps {
   app: EhAppIndexed
@@ -9,7 +9,7 @@ interface AppIconProps {
 }
 
 export function AppIcon({ app, className = 'w-4 h-4' }: AppIconProps) {
-  const { appsMeta } = useBootstrapConfig()
+  // const { appsMeta } = useBootstrapConfig()
   const [imageError, setImageError] = useState(false)
 
   const handleImageError = () => {
@@ -24,9 +24,9 @@ export function AppIcon({ app, className = 'w-4 h-4' }: AppIconProps) {
     if (app.iconName) {
       return `/static/icon/${app.iconName}`
     }
-    if (appsMeta.defaultIcon) {
-      return `/static/icon/${appsMeta.defaultIcon}`
-    }
+    // if (appsMeta.defaultIcon) {
+    //   return `/static/icon/${appsMeta.defaultIcon}`
+    // }
     return null
   }
 

package/src/ui/components/Breadcrumbs.tsx

@@ -0,0 +1,97 @@
+import { Link, useMatches } from '@tanstack/react-router'
+import { ChevronRight, Home } from 'lucide-react'
+import * as React from 'react'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '~/ui/breadcrumb'
+
+export interface BreadcrumbMeta {
+  title: string
+  href?: string
+}
+
+/**
+ * Universal breadcrumb component that reads from route staticData
+ * Routes can define breadcrumbs via the `staticData` property:
+ * 
+ * @example
+ * ```tsx
+ * export const Route = createFileRoute('/admin/chat')({
+ *   component: ChatPage,
+ *   staticData: {
+ *     breadcrumb: { title: 'Chat' }
+ *   }
+ * })
+ * ```
+ */
+export function Breadcrumbs() {
+  const matches = useMatches()
+
+  // Build breadcrumb trail from route matches
+  const breadcrumbs: Array<{ title: string; href?: string }> = []
+
+  // Always add home
+  breadcrumbs.push({ title: 'Home', href: '/' })
+
+  // Process each route match
+  for (const match of matches) {
+    const staticData = match.staticData as { breadcrumb?: BreadcrumbMeta } | undefined
+    if (staticData?.breadcrumb) {
+        // Check if this match has loaderData with app info for dynamic title
+        const loaderData = match.loaderData as { app?: { displayName: string } | null } | undefined
+        const dynamicTitle = loaderData?.app?.displayName
+      
+      breadcrumbs.push({
+          title: dynamicTitle || staticData.breadcrumb.title,
+        href: staticData.breadcrumb.href ?? match.pathname,
+      })
+    }
+  }
+
+  // Don't show breadcrumbs if only home
+  if (breadcrumbs.length <= 1) {
+    return null
+  }
+
+  return (
+    <Breadcrumb className="pb-4">
+      <BreadcrumbList>
+        {breadcrumbs.map((crumb, index) => {
+          const isLast = index === breadcrumbs.length - 1
+
+          return (
+            <React.Fragment key={crumb.href ?? crumb.title}>
+              {index > 0 && (
+                <BreadcrumbSeparator>
+                  <ChevronRight className="h-4 w-4" />
+                </BreadcrumbSeparator>
+              )}
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
+                ) : crumb.href ? (
+                  <BreadcrumbLink asChild>
+                    <Link to={crumb.href} className="text-primary font-medium hover:text-foreground transition-colors">
+                      {index === 0 ? (
+                        <Home className="h-4 w-4" />
+                      ) : (
+                        crumb.title
+                      )}
+                    </Link>
+                  </BreadcrumbLink>
+                ) : (
+                  <BreadcrumbPage>{crumb.title}</BreadcrumbPage>
+                )}
+              </BreadcrumbItem>
+            </React.Fragment>
+          )
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import { Popover } from '~/components/ui/popover'
 import { cn } from '~/lib/utils'
 
 export function EhBaseSelectorRoot({
@@ -16,36 +15,3 @@ export function EhBaseSelectorRoot({
     />
   )
 }
-
-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/contextDebug.tsx

@@ -1,12 +1,61 @@
-import { useEnvironmentContext } from '~/modules/environment/EnvironmentContext'
-import { useResourceJumpContext } from '~/modules/resourceJump/ResourceJumpContext'
+import { pick } from 'radashi'
+import { useState } from 'react'
+import { useEnvironmentContext } from '~/modules/environment/context/EnvironmentContext'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { Checkbox } from '~/ui/checkbox'
+import {
+    Collapsible,
+    CollapsibleContent,
+    CollapsibleTrigger,
+} from '~/ui/collapsible'
+import { Label } from '~/ui/label'
 
 const ContextDebug: React.FC = () => {
-  const { currentResourceJump } = useResourceJumpContext()
-  const { currentEnv } = useEnvironmentContext()
+  const ctxE = useEnvironmentContext()
+  const ctxRj = useResourceJumpContext()
+
+  const [showCurrentResourceJump, setCurrentResourceJump] = useState(false)
+  const [showHistory, setShowHistory] = useState(false)
+
+  const showElements: Array<keyof typeof ctxRj> = []
+  if (showCurrentResourceJump) {
+    showElements.push('currentFlagship')
+    showElements.push('currentResourceJump')
+  }
+
+  const ctx: Record<string, unknown> = {
+    ...pick(ctxRj, showElements),
+  }
+  if (showHistory) {
+    ctx.resHistory = ctxRj.history.slice(-3)
+    ctx.envHistory = ctxE.history.slice(-3)
+  }
 
   return (
-    <pre>{JSON.stringify({ currentResourceJump, currentEnv }, null, 2)}</pre>
+    <Collapsible>
+      <CollapsibleTrigger>Debug</CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="flex flex-col gap-6">
+          <div className="flex items-center gap-3">
+            <Checkbox
+              id="terms"
+              checked={showCurrentResourceJump}
+              onClick={() => setCurrentResourceJump(!showCurrentResourceJump)}
+            />
+            <Label htmlFor="terms">resouceJump</Label>
+          </div>
+          <div className="flex items-center gap-3">
+            <Checkbox
+              id="terms"
+              checked={showHistory}
+              onClick={() => setShowHistory(!showHistory)}
+            />
+            <Label htmlFor="terms">History</Label>
+          </div>
+        </div>
+        <pre>{JSON.stringify(ctx, null, 2)}</pre>
+      </CollapsibleContent>
+    </Collapsible>
   )
 }
 

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

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { MainLayout } from '~/ui/layout/MainLayout'
+import { TopLevelProvidersForErrors } from '~/ui/layout/TopLevelProvidersForErrors'
+
+export interface BaseErrorPageProps {
+  children: ReactNode
+}
+
+/**
+ * Common base component for all error pages
+ * Provides consistent layout with TopLevelProvidersForErrors and MainLayout
+ * Error pages should render their content as children of this component
+ */
+export function BaseErrorPage({ children }: BaseErrorPageProps) {
+  return (
+    <TopLevelProvidersForErrors>
+      <MainLayout>
+        {children}
+        <TanStackRouterDevtools />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </MainLayout>
+    </TopLevelProvidersForErrors>
+  )
+}

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

@@ -1,38 +1,107 @@
 import type { ErrorComponentProps } from '@tanstack/react-router'
+import { BugIcon, RefreshCcwIcon } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '~/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '~/ui/empty'
+import { useDb } from '~/userDb/DbContext'
+import { isDexieError, isDexieMigrationError } from '~/util/error-utils'
+import { BaseErrorPage } from './BaseErrorPage'
 
-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);
-  //     };
-  //   }, []);
+export function Treatment({ error, reset }: ErrorComponentProps) {
+  const db = useDb()
+  const [isResetting, setIsResetting] = useState(false)
 
-  //   const isProbablyWillResolvedAfterUpdate =
-  //     localAppVersion !== undefined &&
-  //     configAppVersion !== undefined &&
-  //     localAppVersion !== configAppVersion &&
-  //     !somethingIsWrong &&
-  //     !isDegraded;
+  async function dexieResetDb() {
+    setIsResetting(true)
+    try {
+      await db.resetDatabase()
+      console.log('Database deleted and recreated successfully')
+      // Reload the page after successful reset
+      window.location.reload()
+    } catch (resetError) {
+      console.error('Failed to reset database:', resetError)
+      // Still reload the page even if reset fails, as it might help
+      window.location.reload()
+    } finally {
+      setIsResetting(false)
+    }
+  }
+
+  if (isDexieError(error)) {
+    const isMigrationError = isDexieMigrationError(error)
+    const buttonText = isMigrationError
+      ? isResetting
+        ? 'Clearing database...'
+        : 'Clear database and reload'
+      : isResetting
+        ? 'Resetting...'
+        : 'Try reset local settings'
+
+    return (
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => dexieResetDb()}
+        disabled={isResetting}
+      >
+        <RefreshCcwIcon className={isResetting ? 'animate-spin' : ''} />
+        {buttonText}
+      </Button>
+    )
+  }
 
   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>
-    </>
+    <div className="flex gap-2">
+      <Button variant="outline" size="sm" onClick={() => reset()}>
+        <RefreshCcwIcon />
+        Try reset error
+      </Button>
+      {/* <Button
+        variant="outline"
+        size="sm"
+        onClick={() => window.location.reload()}
+      >
+        <RefreshCcwIcon />
+        Try refresh page
+      </Button> */}
+    </div>
+  )
+}
+
+export function DefaultErrorComponent({ error, reset }: ErrorComponentProps) {
+  return (
+    <BaseErrorPage>
+      <Empty role="alert">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <BugIcon />
+          </EmptyMedia>
+          <EmptyTitle>Ooops!</EmptyTitle>
+          <EmptyDescription>
+            Error inside env-hopper occured: {<i>{error.message}</i>}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Treatment error={error} reset={reset} />
+
+          <div
+            className={
+              'mt-8 text-center max-w-[90vw] max-h-[80vh] overflow-auto'
+            }
+          >
+            <pre className={'text-left mt-8 text-sm'}>
+              {<i>{error.stack}</i>}
+            </pre>
+          </div>
+        </EmptyContent>
+      </Empty>
+    </BaseErrorPage>
   )
 }