@igstack/app-catalog-frontend-core 0.0.1

package/src/ui/button.tsx

@@ -0,0 +1,66 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import * as React from 'react'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '~/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

package/src/ui/collapsible.tsx

@@ -0,0 +1,45 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { ChevronsUpDown } from 'lucide-react'
+import { Button } from '~/ui/button'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  const { children, ...rest } = props
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      className="flex items-center"
+      asChild
+      {...rest}
+    >
+      <Button variant="ghost" className="">
+        <span>
+          {' '}
+          <ChevronsUpDown />
+        </span>
+        <span>{children}</span>
+      </Button>
+    </CollapsiblePrimitive.CollapsibleTrigger>
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger }
+

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

@@ -0,0 +1,30 @@
+import type { EhAppIndexed } from '@igstack/app-catalog-backend-core'
+import { Button } from '~/ui/button'
+import { AppIcon } from './AppIcon'
+
+interface ActionCardProps {
+  app: EhAppIndexed
+  actionName: string
+  onClick: () => void
+  className?: string
+}
+
+export function ActionCard({
+  app,
+  actionName,
+  onClick,
+  className,
+}: ActionCardProps) {
+  return (
+    <Button
+      variant="outline"
+      className={`h-16 justify-start p-3 hover:bg-accent/50 transition-colors border-border/30 ${className}`}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-2 text-left">
+        <AppIcon app={app} className="w-4 h-4 flex-shrink-0" />
+        <span className="text-xs font-medium leading-tight">{actionName}</span>
+      </div>
+    </Button>
+  )
+}

package/src/ui/components/AppIcon.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+import { Package } from 'lucide-react'
+import type { EhAppIndexed } from '@igstack/app-catalog-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/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

@@ -0,0 +1,17 @@
+import React from 'react'
+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}
+    />
+  )
+}

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/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>
+  )
+}