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

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

@@ -0,0 +1,89 @@
+import { Link } from '@tanstack/react-router'
+import { Home, Mail, ShieldAlert } from 'lucide-react'
+import type { AuthorizationError } from '~/errors/AuthorizationError'
+import { Button } from '~/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '~/ui/empty'
+import { BaseErrorPage } from './BaseErrorPage'
+
+export interface ForbiddenErrorPageProps {
+  error: AuthorizationError
+}
+
+export function ForbiddenErrorPage({ error }: ForbiddenErrorPageProps) {
+  const hasRoleInfo =
+    error.requiredRoles !== undefined && error.requiredRoles.length > 0
+  const hasPermissionInfo =
+    error.requiredPermissions !== undefined &&
+    error.requiredPermissions.length > 0
+
+  return (
+    <BaseErrorPage>
+      <Empty role="alert">
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <ShieldAlert className="text-destructive" />
+          </EmptyMedia>
+          <EmptyTitle>Access Denied</EmptyTitle>
+          <EmptyDescription>
+            {error.message}
+            {error.resource && (
+              <>
+                <br />
+                <span className="text-sm text-muted-foreground">
+                  Resource: {error.resource}
+                </span>
+              </>
+            )}
+          </EmptyDescription>
+        </EmptyHeader>
+
+        <EmptyContent>
+          {(hasRoleInfo || hasPermissionInfo) && (
+            <div className="mb-6 p-4 bg-muted/50 rounded-lg text-left max-w-md mx-auto">
+              <p className="text-sm font-medium mb-2">Required Access:</p>
+              {hasRoleInfo && (
+                <div className="text-sm text-muted-foreground mb-2">
+                  <span className="font-medium">Roles: </span>
+                  {error.requiredRoles.join(', ')}
+                </div>
+              )}
+              {hasPermissionInfo && (
+                <div className="text-sm text-muted-foreground">
+                  <span className="font-medium">Permissions: </span>
+                  {error.requiredPermissions.join(', ')}
+                </div>
+              )}
+            </div>
+          )}
+
+          <div className="flex gap-3 justify-center">
+            <Button asChild>
+              <Link to="/">
+                <Home className="w-4 h-4 mr-2" />
+                Go Home
+              </Link>
+            </Button>
+            <Button variant="outline" asChild>
+              <a href="mailto:support@example.com">
+                <Mail className="w-4 h-4 mr-2" />
+                Contact Support
+              </a>
+            </Button>
+          </div>
+
+          <p className="mt-6 text-sm text-muted-foreground max-w-md mx-auto">
+            If you believe you should have access to this resource, please
+            contact your administrator or support team.
+          </p>
+        </EmptyContent>
+      </Empty>
+    </BaseErrorPage>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { DefaultErrorComponent } from './DefaultErrorComponent'
+import { ForbiddenErrorPage } from './ForbiddenErrorPage'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+import { AuthorizationError } from '~/errors/AuthorizationError'
+
+/**
+ * Smart error component that routes to appropriate error UI based on error type
+ */
+export function RootErrorPage(props: ErrorComponentProps) {
+  const { error } = props
+
+  // Handle authorization errors with custom 403 page
+  if (AuthorizationError.isAuthorizationError(error)) {
+    return <ForbiddenErrorPage error={error} />
+  }
+
+  // Handle other errors with default error component
+  return (
+    <div className="p-5">
+      <DefaultErrorComponent {...props} />
+    </div>
+  )
+}

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

@@ -26,6 +26,25 @@ export function Footer() {
             <ExternalLink className="h-3 w-3" />
           </a>
         </div>
+        {import.meta.env.DEV && (
+          <div className="grid grid-cols-4 w-[700px] gap-1 text-sm ">
+            <div className="p-1 bg-accent">bg-accent</div>
+            <div className="p-1 bg-background">bg-background</div>
+            <div className="p-1 bg-highlight">bg-highglight</div>
+            <div className="p-1 bg-card">bg-card</div>
+            <div className="p-1 bg-popover">bg-poprover</div>
+            <div className="p-1 bg-secondary">bg-secondary</div>
+            <div className="p-1 bg-muted">bg-muted</div>
+            <div className="p-1 bg-chart-1">bg-chart-1</div>
+            <div className="p-1 bg-chart-2">bg-chart-2</div>
+            <div className="p-1 bg-sidebar">bg-sidebar</div>
+            <div className="p-1 bg-input">bg-input</div>
+            <div className="p-1 bg-border">bg-border</div>
+            <div className="p-1 bg-sidebar-primary">bg-sidebar-primary</div>
+            <div className="p-1 bg-sidebar-accent">bg-sidebar-accent</div>
+            <div className="p-1 bg-sidebar-border">bg-sidebar-border</div>
+          </div>
+        )}
       </div>
     </footer>
   )

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

@@ -0,0 +1,172 @@
+import { Link, useNavigate, useRouterState } from '@tanstack/react-router'
+import { LogOut, Settings } from 'lucide-react'
+import type React from 'react'
+import AppCatalogLogo from '~/assets/app-catalog.svg?react'
+import EnvHopperLogo from '~/assets/env-hopper-logo.svg?react'
+import { ThemeSwitcher } from '~/components/ThemeSwitcher'
+import { getAppMode } from '~/lib/getAppMode'
+import {
+  useAuth,
+  useAuthActions,
+  useIsAuthenticated,
+  useUser,
+} from '~/modules/auth'
+import { useAuthModal } from '~/modules/auth/AuthModalContext'
+import { ShareLinkButton } from '~/modules/resourceJump/ui/ShareLinkButton'
+import { Button } from '~/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/ui/dropdown-menu'
+import { Skeleton } from '~/ui/skeleton'
+
+export interface HeaderProps {
+  middle?: React.ReactNode
+}
+
+function HeaderNavLink({ to, label }: { to: string; label: string }) {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const isActive = pathname === to || pathname.startsWith(`${to}/`)
+
+  return (
+    <Link
+      to={to}
+      className={
+        'px-4 py-3 text-sm font-medium rounded-md transition-colors ' +
+        (isActive
+          ? 'bg-accent text-foreground'
+          : 'text-muted-foreground hover:text-foreground hover:bg-accent/40')
+      }
+    >
+      {label}
+    </Link>
+  )
+}
+
+export function Header({ middle }: HeaderProps) {
+  const { isLoading } = useAuth()
+  const isAuthenticated = useIsAuthenticated()
+  const user = useUser()
+  const { logout } = useAuthActions()
+  const navigate = useNavigate()
+  const { open: openLoginModal } = useAuthModal()
+  const appMode = getAppMode()
+
+  const handleLogout = async () => {
+    try {
+      await logout()
+    } catch (error) {
+      console.error('Logout failed:', error)
+    }
+  }
+
+  const handleAdminClick = () => {
+    navigate({ to: '/admin' })
+  }
+
+  const handleLoginClick = () => {
+    // Preserve the current URL for redirect after login
+    const currentUrl = window.location.pathname + window.location.search
+    openLoginModal(currentUrl)
+  }
+
+  const isCatalogMode = appMode === 'catalog'
+  const Logo = isCatalogMode ? AppCatalogLogo : EnvHopperLogo
+  const appTitle = isCatalogMode ? 'App Catalog' : 'Env‑Hopper'
+
+  return (
+    <div className="flex items-center mb-4 justify-between gap-2">
+      <div className="flex items-center gap-4">
+        <Link to="/">
+          <div className="flex items-center gap-2">
+            <Logo className="h-16 w-16" />
+            <span className="text-lg font-bold hidden md:block">
+              {appTitle}
+            </span>
+          </div>
+        </Link>
+
+        {!isCatalogMode && (
+          <div className="hidden md:flex items-center gap-1">
+            <HeaderNavLink to="/catalog/apps" label="Apps" />
+            <HeaderNavLink to="/envs" label="Envs" />
+            <HeaderNavLink to="/dashboard" label="Hopper" />
+            {isAuthenticated && <HeaderNavLink to="/admin" label="Admin" />}
+          </div>
+        )}
+      </div>
+      {middle && <div className="sm:min-w-75">{middle}</div>}
+      <div className="flex items-center gap-3">
+        <ShareLinkButton />
+        <ThemeSwitcher />
+        {isLoading ? (
+          <Skeleton className="w-8 h-8 rounded-full" />
+        ) : !isAuthenticated ? (
+          <button
+            type="button"
+            onClick={handleLoginClick}
+            className="text-sm font-medium text-muted-foreground hover:text-foreground cursor-pointer"
+          >
+            Login
+          </button>
+        ) : user?.name ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-8 h-8 rounded-full p-0 hover:bg-accent hover:text-accent-foreground cursor-pointer"
+              >
+                {user.image ? (
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    className="w-full h-full rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center w-full h-full rounded-full bg-primary text-primary-foreground text-xs font-semibold">
+                    {user.name.charAt(0).toUpperCase()}
+                  </div>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-56">
+              <div className="px-2 py-3 flex items-center gap-3">
+                {user.image ? (
+                  <img
+                    src={user.image}
+                    alt={user.name}
+                    className="w-10 h-10 rounded-full object-cover shrink-0"
+                  />
+                ) : (
+                  <div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary text-primary-foreground text-sm font-semibold shrink-0">
+                    {user.name.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div className="flex flex-col min-w-0">
+                  <p className="text-xs text-muted-foreground truncate">
+                    @{user.email?.split('@')[0] || 'user'}
+                  </p>
+                  <p className="text-sm font-medium truncate">{user.name}</p>
+                </div>
+              </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleAdminClick}>
+                <Settings className="h-4 w-4 mr-2" />
+                <span>Admin</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={handleLogout}>
+                <LogOut className="h-4 w-4 mr-2" />
+                <span>Sign out</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+    </div>
+  )
+}

package/src/ui/components/quickBar/AppQuickJumpBar.tsx

@@ -0,0 +1,176 @@
+import { useQuery } from '@tanstack/react-query'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { ApiQueryMagazineResourceJump } from '~/modules/resourceJump/api/ApiQueryMagazineResourceJump'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { getUngroupedResources } from '~/modules/resourceJump/utils/mapToFlagshipResourceJumps'
+import { Button } from '~/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '~/ui/collapsible'
+
+interface AppQuickJumpBarProps {
+  className?: string
+}
+
+export function AppQuickJumpBar({ className }: AppQuickJumpBarProps) {
+  const { setCurrentResourceJumpSlug, currentResourceJump } =
+    useResourceJumpContext()
+  const { data: resourceJumpsData, isLoading } = useQuery(
+    ApiQueryMagazineResourceJump.getResourceJumps(),
+  )
+
+  // Track which groups are expanded (default to expanded if current resource is in the group)
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
+    () => new Set(),
+  )
+
+  // Auto-expand groups that contain the current resource
+  useEffect(() => {
+    if (!resourceJumpsData || !currentResourceJump) {
+      return
+    }
+
+    resourceJumpsData.groups?.forEach((group) => {
+      if (group.resourceSlugs.includes(currentResourceJump.slug)) {
+        setExpandedGroups((prev) => {
+          const next = new Set(prev)
+          next.add(group.slug)
+          return next
+        })
+      }
+    })
+  }, [resourceJumpsData, currentResourceJump?.slug, currentResourceJump])
+
+  if (isLoading) {
+    return (
+      <div className={`${className}`}>
+        <div className="flex flex-col gap-2 w-full">
+          {Array.from({ length: 7 }).map((_, i) => (
+            <Button
+              key={`skeleton-${i}`}
+              variant="ghost"
+              disabled
+              className="justify-start text-left animate-pulse"
+            >
+              <span className="text-xs truncate">Loading...</span>
+            </Button>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (!resourceJumpsData) {
+    return null
+  }
+
+  // Get ungrouped resources
+  const ungroupedResources = getUngroupedResources(
+    resourceJumpsData.resourceJumps,
+    resourceJumpsData.groups,
+  )
+
+  return (
+    <div className={`${className}`} data-testid="quick-jump-section">
+      <div className="flex flex-col gap-1 w-full">
+        {/* Show ungrouped resources first */}
+        {ungroupedResources.map((resource) => {
+          const isActive = resource.slug === currentResourceJump?.slug
+          return (
+            <Button
+              key={resource.slug}
+              variant="ghost"
+              onClick={() => setCurrentResourceJumpSlug(resource.slug)}
+              className={`justify-start text-left w-full ${
+                isActive ? 'bg-accent text-accent-foreground font-medium' : ''
+              }`}
+            >
+              <span className="text-xs truncate flex-1">
+                {resource.displayName}
+              </span>
+            </Button>
+          )
+        })}
+
+        {/* Show groups with nested resources */}
+        {resourceJumpsData.groups?.map((group) => {
+          const groupResources = resourceJumpsData.resourceJumps.filter((r) =>
+            group.resourceSlugs.includes(r.slug),
+          )
+          const isExpanded = expandedGroups.has(group.slug)
+          const hasActiveResource = groupResources.some(
+            (r) => r.slug === currentResourceJump?.slug,
+          )
+
+          return (
+            <Collapsible
+              key={group.slug}
+              open={isExpanded}
+              onOpenChange={(open) => {
+                if (open) {
+                  setExpandedGroups((prev) => new Set(prev).add(group.slug))
+                } else {
+                  setExpandedGroups((prev) => {
+                    const next = new Set(prev)
+                    next.delete(group.slug)
+                    return next
+                  })
+                }
+              }}
+            >
+              <CollapsibleTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className={`justify-start text-left w-full ${
+                    hasActiveResource
+                      ? 'bg-accent/50 text-accent-foreground font-medium'
+                      : ''
+                  }`}
+                >
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                    {isExpanded ? (
+                      <ChevronDown className="w-3 h-3 shrink-0" />
+                    ) : (
+                      <ChevronRight className="w-3 h-3 shrink-0" />
+                    )}
+                    <span className="text-xs truncate font-semibold">
+                      {group.displayName}
+                    </span>
+                  </div>
+                </Button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="pl-4">
+                <div className="flex flex-col gap-1 mt-1">
+                  {groupResources.map((resource) => {
+                    const isActive = resource.slug === currentResourceJump?.slug
+                    return (
+                      <Button
+                        key={resource.slug}
+                        variant="ghost"
+                        onClick={() =>
+                          setCurrentResourceJumpSlug(resource.slug)
+                        }
+                        className={`justify-start text-left w-full ${
+                          isActive
+                            ? 'bg-accent text-accent-foreground font-medium'
+                            : ''
+                        }`}
+                      >
+                        <span className="text-xs truncate flex-1 pl-4">
+                          {resource.displayName}
+                        </span>
+                      </Button>
+                    )
+                  })}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/ui/components/quickBar/QuickJumpButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+interface QuickJumpButtonProps {
+  onClick?: (e: React.MouseEvent) => void
+  className?: string
+}
+
+export function QuickJumpButton({
+  onClick,
+  className = '',
+}: QuickJumpButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`opacity-0 group-hover:opacity-100 transition-opacity duration-500 absolute right-0 top-0 bottom-0 pl-3 pr-4 text-[10px] font-medium text-green-600 hover:bg-green-600 hover:text-white rounded-r-md cursor-pointer flex items-center ${className}`}
+    >
+      QUICK JUMP
+    </button>
+  )
+}

package/src/ui/components/quickBar/ResourceJumpGroupViewer.tsx

@@ -0,0 +1,80 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiQueryMagazineResourceJump } from '~/modules/resourceJump/api/ApiQueryMagazineResourceJump'
+import { useResourceJumpContext } from '~/modules/resourceJump/context/ResourceJumpContext'
+import { getPrimaryResourceSlug } from '~/modules/resourceJump/utils/mapToFlagshipResourceJumps'
+import { Button } from '~/ui/button'
+
+interface ResourceJumpGroupViewerProps {
+  className?: string
+}
+
+export function ResourceJumpGroupViewer({
+  className,
+}: ResourceJumpGroupViewerProps) {
+  const { setCurrentResourceJumpSlug, currentResourceJump } =
+    useResourceJumpContext()
+  const { data: resourceJumpsData, isLoading } = useQuery(
+    ApiQueryMagazineResourceJump.getResourceJumps(),
+  )
+
+  if (isLoading) {
+    return (
+      <div className={`${className}`}>
+        <div className="flex flex-col gap-2">
+          <div className="text-sm text-muted-foreground animate-pulse">
+            Loading...
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (!resourceJumpsData || !currentResourceJump) {
+    return null
+  }
+
+  // Find the group where the current resource is the primary resource
+  const group = resourceJumpsData.groups?.find(
+    (g) => getPrimaryResourceSlug(g) === currentResourceJump.slug,
+  )
+
+  // Only show if the selected app is a group (i.e., it's the primary resource of a group)
+  if (!group) {
+    return null
+  }
+
+  // Get all resources in this group
+  const groupResources = resourceJumpsData.resourceJumps.filter((r) =>
+    group.resourceSlugs.includes(r.slug),
+  )
+
+  return (
+    <div
+      className={`flex flex-col gap-2 ${className}`}
+      data-testid="resource-jump-group-viewer"
+    >
+      <div className="text-sm text-muted-foreground font-medium">
+        {group.displayName}
+      </div>
+      <div className="flex flex-col gap-1">
+        {groupResources.map((resource) => {
+          const isActive = resource.slug === currentResourceJump.slug
+          return (
+            <Button
+              key={resource.slug}
+              variant="ghost"
+              onClick={() => setCurrentResourceJumpSlug(resource.slug)}
+              className={`justify-start text-left w-full ${
+                isActive ? 'bg-accent text-accent-foreground font-medium' : ''
+              }`}
+            >
+              <span className="text-sm truncate flex-1">
+                {resource.displayName}
+              </span>
+            </Button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/ui/components/quickBar/arrangeGridItems.ts

@@ -0,0 +1,61 @@
+interface GridItem {
+  slug: string
+  displayName: string
+  groupName: string | null
+}
+
+/**
+ * Arranges items in a grid layout, preferring to place items from the same group
+ * consecutively so they naturally flow into the same column in CSS Grid.
+ *
+ * @param items - Array of items to arrange
+ * @param numRows - Number of rows in the grid
+ * @param numCols - Number of columns in the grid
+ * @returns Array of items in the order they should appear in the DOM
+ */
+export function arrangeGridItems(
+  items: Array<GridItem>,
+  numRows: number,
+  numCols: number,
+): Array<GridItem> {
+  const totalSlots = numRows * numCols
+
+  // Group items by their group name
+  const groupedItems = new Map<string, Array<GridItem>>()
+  const ungroupedItems: Array<GridItem> = []
+
+  for (const item of items) {
+    if (item.groupName) {
+      if (!groupedItems.has(item.groupName)) {
+        groupedItems.set(item.groupName, [])
+      }
+      const group = groupedItems.get(item.groupName)
+      if (group) {
+        group.push(item)
+      }
+    } else {
+      ungroupedItems.push(item)
+    }
+  }
+
+  const arranged: Array<GridItem> = []
+
+  // Simple approach: place grouped items first (they'll naturally group in columns),
+  // then fill with ungrouped items
+  // Sort items so grouped items appear consecutively
+  // Items from the same group should be placed together
+  for (const [_, groupItems] of groupedItems.entries()) {
+    for (const item of groupItems) {
+      if (arranged.length >= totalSlots) break
+      arranged.push(item)
+    }
+  }
+
+  // Add remaining items
+  for (const item of ungroupedItems) {
+    if (arranged.length >= totalSlots) break
+    arranged.push(item)
+  }
+
+  return arranged.slice(0, totalSlots)
+}

package/src/ui/components/widgets/CredentialsWidget.tsx

@@ -1,7 +1,7 @@
 import { Copy, KeyRound } from 'lucide-react'
-import { Button } from '~/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'
-import { Badge } from '~/components/ui/badge'
+import { Badge } from '~/ui/badge'
+import { Button } from '~/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '~/ui/card'
 
 interface Credential {
   slug: string

package/src/ui/components/widgets/VersionWidget.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpRight } from 'lucide-react'
-import { Card, CardContent, CardHeader, CardTitle } from '~/components/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '~/ui/card'
 
 interface VersionWidgetProps {
   version?: string