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

package/src/modules/appCatalog/ui/grid/AppCatalogGrid.tsx

@@ -0,0 +1,160 @@
+import { AppWindow, ExternalLink } from 'lucide-react'
+import React from 'react'
+
+import type { AppForCatalog } from '@env-hopper/backend-core'
+
+import { cn } from '~/lib/utils'
+import { Badge } from '~/ui/badge'
+import { Card, CardContent } from '~/ui/card'
+
+export interface AppCatalogGridProps {
+  apps: Array<AppForCatalog>
+  onAppClick?: (app: AppForCatalog) => void
+}
+
+function getIconUrl(iconName: string): string {
+  const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'
+  return `${baseUrl}/api/icons/by-name/${iconName}`
+}
+
+function AppIcon({ app, className }: { app: AppForCatalog; className?: string }) {
+  const [imageError, setImageError] = React.useState(false)
+
+  // Use iconName from backend if available
+  if (app.iconName && !imageError) {
+    return (
+      <div className={cn('size-12 shrink-0', className)}>
+        <img
+          src={getIconUrl(app.iconName)}
+          alt={`${app.displayName} icon`}
+          className="size-12 rounded-lg object-contain"
+          onError={() => setImageError(true)}
+        />
+      </div>
+    )
+  }
+
+  // Fallback icon
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center rounded-lg bg-primary/10 text-primary size-12 shrink-0',
+        className,
+      )}
+    >
+      <AppWindow className="size-6" />
+    </div>
+  )
+}
+
+function AppScreenshot({ app }: { app: AppForCatalog }) {
+  const [imageError, setImageError] = React.useState(false)
+  const [isLoadingImage, setIsLoadingImage] = React.useState(true)
+
+  // Check if app has screenshots
+  const screenshotId = app.screenshotIds?.[0]
+  if (!screenshotId) {
+    return (
+      <div className="w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64">
+        <div className="w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm">
+          No screenshot available
+        </div>
+      </div>
+    )
+  }
+
+  const screenshotImageUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'}/api/screenshots/${screenshotId}?size=512`
+
+  return (
+    <div className="w-full bg-muted/50 rounded-lg overflow-hidden flex items-center justify-center min-h-64">
+      {!imageError ? (
+        <img
+          src={screenshotImageUrl}
+          alt={`${app.displayName} screenshot`}
+          className="w-full h-64 object-contain"
+          onError={() => {
+            setImageError(true)
+            setIsLoadingImage(false)
+          }}
+          onLoad={() => setIsLoadingImage(false)}
+        />
+      ) : null}
+      {(imageError || isLoadingImage) && (
+        <div className="w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm">
+          {isLoadingImage ? 'Loading screenshot...' : 'No screenshot available'}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function AppCard({ app, onClick }: { app: AppForCatalog; onClick?: () => void }) {
+  const hasUrl = app.appUrl
+
+  return (
+    <Card
+      className="group hover:shadow-xl hover:shadow-primary/20 transition-all duration-300 flex flex-col h-full cursor-pointer hover:border-primary/50"
+      onClick={onClick}
+    >
+      {/* Screenshot Section */}
+      <div className="w-full shrink-0">
+        <AppScreenshot app={app} />
+      </div>
+
+      <CardContent className="p-6 flex flex-col gap-3 flex-1">
+        {/* Icon and Title Row */}
+        <div className="flex items-start gap-3">
+          <AppIcon app={app} />
+          <div className="flex-1 min-w-0">
+            <div className="font-semibold text-base leading-tight mb-1">
+              {app.displayName || 'Unnamed App'}
+            </div>
+            {hasUrl && (
+              <a
+                href={app.appUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-xs text-muted-foreground hover:text-primary inline-flex items-center gap-1"
+                onClick={(e) => e.stopPropagation()}
+              >
+                Visit app
+                <ExternalLink className="size-3" />
+              </a>
+            )}
+          </div>
+        </div>
+
+        {/* Description */}
+        {app.description && (
+          <p className="text-sm text-muted-foreground line-clamp-3">
+            {app.description}
+          </p>
+        )}
+
+        {/* Tags/Teams */}
+        <div className="flex flex-wrap gap-1.5 mt-auto">
+          {app.tags?.slice(0, 3).map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-xs">
+              {tag}
+            </Badge>
+          ))}
+          {(app.tags?.length || 0) > 3 && (
+            <Badge variant="outline" className="text-xs">
+              +{(app.tags?.length || 0) - 3}
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function AppCatalogGrid({ apps, onAppClick }: AppCatalogGridProps) {
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      {apps.map((app) => (
+        <AppCard key={app.id} app={app} onClick={() => onAppClick?.(app)} />
+      ))}
+    </div>
+  )
+}

package/src/modules/appCatalog/ui/grid/AppCatalogTable.tsx

@@ -0,0 +1,89 @@
+import type { AppForCatalog } from '@env-hopper/backend-core'
+import type { ColumnDef } from '@tanstack/react-table'
+import {
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from '@tanstack/react-table'
+import { useMemo } from 'react'
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '~/ui/table'
+import { getAppUrl } from './appCatalogUtils'
+
+export interface AppCatalogTableProps {
+  apps: Array<AppForCatalog>
+}
+
+export function AppCatalogTable({ apps }: AppCatalogTableProps) {
+  const columns = useMemo<Array<ColumnDef<AppForCatalog>>>(
+    () => [
+      {
+        id: 'name',
+        header: 'App Name',
+        cell: ({ row }) => row.original.displayName,
+      },
+      {
+        id: 'url',
+        header: 'URL',
+        cell: ({ row }) => getAppUrl(row.original),
+      },
+      {
+        id: 'description',
+        header: 'Description',
+        cell: ({ row }) => (
+          <div className="max-w-md line-clamp-2">
+            {row.original.description}
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: apps,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="w-full overflow-hidden rounded-md border border-border">
+      <Table>
+        <TableHeader className="bg-muted/30 text-muted-foreground">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id} className="px-3">
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+
+        <TableBody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id} className="px-3 align-top">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

package/src/modules/appCatalog/ui/grid/appCatalogUtils.ts

@@ -0,0 +1,30 @@
+import type { AppForCatalog } from '@env-hopper/backend-core'
+
+export function getAppUrl(app: AppForCatalog): string {
+  return app.appUrl || '#'
+}
+
+export function getAppAccessInstructions(app: AppForCatalog): string {
+  const { access } = app
+
+  if (!access) {
+    return 'Contact administrator'
+  }
+
+  switch (access.type) {
+    case 'bot':
+      return `Bot: ${access.prompt}`
+    case 'ticketing':
+      return `Ticketing: ${access.providerId}`
+    case 'email':
+      return `Email: ${access.contacts.map((c) => c.email).join(', ')}`
+    case 'self-service':
+      return access.url || access.instructions
+    case 'documentation':
+      return access.url
+    case 'manual':
+      return access.instructions
+    default:
+      return 'Contact administrator'
+  }
+}

package/src/modules/appCatalog/ui/layout/AppCatalogLayout.tsx

@@ -0,0 +1,55 @@
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import { HomeIcon } from 'lucide-react'
+import { AppCatalogProvider } from '~/modules/appCatalog/context/AppCatalogContext'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbSeparator,
+} from '~/ui/breadcrumb'
+import { MainLayout } from '~/ui/layout/MainLayout'
+import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
+import { Link } from '~/ui/link'
+
+export interface AppCatalogLayoutProps {
+  children: React.ReactNode
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+export function AppCatalogLayout({
+  children,
+  queryClient,
+  trpcClient,
+}: AppCatalogLayoutProps) {
+  return (
+    <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>
+      <AppCatalogProvider>
+        <MainLayout>
+          <Breadcrumb className="pb-4">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to={'/'} className="flex items-center gap-1">
+                    <HomeIcon className="size-4" />
+                    <span className="sr-only">Home</span>
+                  </Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/catalog/apps">App Catalog</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="flex flex-1 w-full justify-center">{children}</div>
+        </MainLayout>
+      </AppCatalogProvider>
+    </TopLevelProviders>
+  )
+}

package/src/modules/appCatalog/ui/pages/AppCatalogPage.tsx

@@ -0,0 +1,86 @@
+import { useNavigate, useRouter, useSearch } from '@tanstack/react-router'
+import { useMemo, useState } from 'react'
+
+import type { AppForCatalog } from '@env-hopper/backend-core'
+import { useAppCatalogContext } from '../../context/AppCatalogContext'
+import { AppDetailModal } from '../components/AppDetailModal'
+import { AppCatalogGrid } from '../grid/AppCatalogGrid'
+
+import { Input } from '~/ui/input'
+
+export function AppCatalogPage() {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const search = useSearch({ strict: false }) 
+  const { apps, isLoadingApps } = useAppCatalogContext()
+  const [searchValue, setSearchValue] = useState('')
+
+  const filteredApps = useMemo(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase()
+    if (!normalizedSearchValue) {
+      return apps
+    }
+
+    return apps.filter((app) => {
+      const name = app.displayName.toLowerCase() || ''
+      const description = app.description?.toLowerCase() || ''
+      const id = app.id.toLowerCase() || ''
+      const tags = app.tags?.join(' ').toLowerCase() || ''
+
+      return (
+        name.includes(normalizedSearchValue) ||
+        description.includes(normalizedSearchValue) ||
+        id.includes(normalizedSearchValue) ||
+        tags.includes(normalizedSearchValue)
+      )
+    })
+  }, [apps, searchValue])
+
+  const handleAppClick = (app: AppForCatalog) => {
+    if (app.slug) {
+      const currentPath = router.state.location.pathname
+      navigate({ to: currentPath, search: { app: app.slug } })
+    }
+  }
+
+  const handleCloseModal = () => {
+    const currentPath = router.state.location.pathname
+    const { app: _app, ...restSearch } = search
+    navigate({ to: currentPath, search: restSearch })
+  }
+
+  if (isLoadingApps) {
+    return <div className="py-6 text-muted-foreground">Loading…</div>
+  }
+
+  const selectedAppSlug = search.app
+  const selectedApp = selectedAppSlug ? apps.find((a) => a.slug === selectedAppSlug) : null
+
+  return (
+    <div className="py-6 flex flex-col gap-4 w-full max-w-7xl">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <div className="font-medium text-2xl">App Catalog</div>
+          <div className="text-sm text-muted-foreground">
+            {filteredApps.length} apps available
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full">
+        <Input
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          placeholder="Search apps by name, description, or tags…"
+          aria-label="Search apps"
+        />
+      </div>
+
+      <AppCatalogGrid apps={filteredApps} onAppClick={handleAppClick} />
+
+      {selectedApp && (
+        <AppDetailModal app={selectedApp} isOpen={true} onClose={handleCloseModal} />
+      )}
+    </div>
+  )
+}

package/src/modules/auth/AuthContext.tsx

@@ -0,0 +1,117 @@
+import type { Session } from 'better-auth/types'
+import { createContext, use, useEffect, useMemo, useState } from 'react'
+
+interface User {
+  id: string
+  email?: string | null
+  name?: string | null
+  image?: string | null
+  emailVerified?: boolean
+}
+
+interface AuthContextType {
+  session: Session | null
+  user: User | null
+  isLoading: boolean
+  isAuthenticated: boolean
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+const STORAGE_KEY = 'eh_auth_user'
+
+/**
+ * Provider component for authentication state
+ * Fetches and manages session from the backend
+ * Uses localStorage for optimistic rendering to avoid flickering
+ */
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<Session | null>(null)
+  const [user, setUser] = useState<User | null>(() => {
+    // Hydrate from localStorage on mount to avoid flickering
+    if (typeof window === 'undefined') return null
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      return stored ? JSON.parse(stored) : null
+    } catch {
+      return null
+    }
+  })
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Fetch session from backend
+    async function fetchSession() {
+      try {
+        const response = await fetch('/api/auth/session', {
+          credentials: 'include',
+        })
+        if (response.ok) {
+          const data = await response.json()
+          setSession(data)
+          setUser(data?.user || null)
+          if (data?.user) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(data.user))
+          } else {
+            localStorage.removeItem(STORAGE_KEY)
+          }
+        } else {
+          setSession(null)
+          setUser(null)
+          localStorage.removeItem(STORAGE_KEY)
+        }
+      } catch (error) {
+        console.error('Failed to fetch session:', error)
+        setSession(null)
+        setUser(null)
+        localStorage.removeItem(STORAGE_KEY)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchSession()
+  }, [])
+
+  const value: AuthContextType = useMemo(
+    () => ({
+      session,
+      user,
+      isLoading,
+      isAuthenticated: !!user,
+    }),
+    [session, user, isLoading],
+  )
+
+  return <AuthContext value={value}>{children}</AuthContext>
+}
+
+/**
+ * Hook to access authentication state
+ * @returns Authentication context containing session, user, and auth state
+ */
+export function useAuth() {
+  const context = use(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to check if user is authenticated
+ * @returns Boolean indicating if user is authenticated
+ */
+export function useIsAuthenticated() {
+  const { isAuthenticated } = useAuth()
+  return isAuthenticated
+}
+
+/**
+ * Hook to get the current user
+ * @returns Current user or null
+ */
+export function useUser() {
+  const { user } = useAuth()
+  return user
+}

package/src/modules/auth/AuthModalContext.tsx

@@ -0,0 +1,49 @@
+import { createContext, use, useMemo, useState } from 'react'
+
+interface AuthModalContextType {
+  isOpen: boolean
+  redirectUrl: string
+  open: (redirectUrl?: string) => void
+  close: () => void
+}
+
+const AuthModalContext = createContext<AuthModalContextType | undefined>(
+  undefined,
+)
+
+/**
+ * Provider for global login modal state
+ * Allows opening/closing modal from anywhere in the app
+ */
+export function AuthModalProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [redirectUrl, setRedirectUrl] = useState('/')
+
+  const value = useMemo<AuthModalContextType>(() => ({
+    isOpen,
+    redirectUrl,
+    open: (url?: string) => {
+      setRedirectUrl(url || '/')
+      setIsOpen(true)
+    },
+    close: () => setIsOpen(false),
+  }), [isOpen, redirectUrl])
+
+  return (
+    <AuthModalContext value={value}>{children}</AuthModalContext>
+  )
+}
+
+/**
+ * Hook to access and control the login modal
+ * @returns Object with isOpen, open, and close
+ */
+export function useAuthModal() {
+  const context = use(AuthModalContext)
+  if (!context) {
+    throw new Error(
+      'useAuthModal must be used within AuthModalProvider',
+    )
+  }
+  return context
+}

package/src/modules/auth/ProtectedContent.tsx

@@ -0,0 +1,55 @@
+import { useNavigate, useRouterState } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { useAuth } from './AuthContext'
+
+interface ProtectedProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  requiredRole?: string // For future role-based access control
+}
+
+/**
+ * Component to protect content based on authentication status
+ * Only renders children if user is authenticated
+ * @param children - Content to show when authenticated
+ * @param fallback - Content to show when not authenticated (optional)
+ */
+export function ProtectedContent({
+  children,
+  fallback = null,
+}: ProtectedProps) {
+  const { isAuthenticated, isLoading } = useAuth()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  return isAuthenticated ? <>{children}</> : <>{fallback}</>
+}
+
+/**
+ * HOC to protect a component
+ * Redirects to login if not authenticated, preserving the original URL
+ * @param Component - Component to protect
+ */
+export function withProtection<TProps extends object>(
+  Component: React.ComponentType<TProps>,
+) {
+  return function ProtectedComponent(props: TProps) {
+    const { isAuthenticated } = useAuth()
+    const navigate = useNavigate()
+    const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+    useEffect(() => {
+      if (!isAuthenticated) {
+        navigate({ to: '/login', search: { redirect: pathname } })
+      }
+    }, [isAuthenticated, navigate, pathname])
+
+    if (!isAuthenticated) {
+      return null
+    }
+
+    return <Component {...props} />
+  }
+}

package/src/modules/auth/authClient.ts

@@ -0,0 +1,9 @@
+import { createAuthClient } from 'better-auth/react'
+
+/**
+ * Better Auth client for frontend authentication
+ * Automatically handles session management and cookies
+ */
+export const authClient = createAuthClient({
+  baseURL: window.location.origin,
+})

package/src/modules/auth/index.ts

@@ -0,0 +1,6 @@
+export { authClient } from './authClient'
+export { AuthProvider, useAuth, useIsAuthenticated, useUser } from './AuthContext'
+export { ProtectedContent, withProtection } from './ProtectedContent'
+export { LoginPage } from './ui/LoginPage'
+export { useAuthActions } from './useAuthActions'
+

package/src/modules/auth/ui/LoginModal.tsx

@@ -0,0 +1,36 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '~/ui/dialog'
+import { useAuthModal } from '../AuthModalContext'
+import { LoginPage } from './LoginPage'
+
+/**
+ * LoginModal renders a dialog with login form
+ * Controlled by AuthModalContext global state
+ * Can be opened from anywhere using useAuthModal hook
+ */
+export function LoginModal() {
+  const { isOpen, close } = useAuthModal()
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        close()
+      }
+    }}>
+      <DialogContent className="w-full max-w-md">
+        <DialogHeader>
+          <DialogTitle>Sign In</DialogTitle>
+          <DialogDescription>
+            Choose your sign-in method to access EnvHopper
+          </DialogDescription>
+        </DialogHeader>
+        <LoginPage onSuccess={close} />
+      </DialogContent>
+    </Dialog>
+  )
+}