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

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

package/src/{components/ui → ui}/dialog.tsx

@@ -1,45 +1,9 @@
-'use client'
-
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { XIcon } from 'lucide-react'
 
-import { cva } from 'class-variance-authority'
-import type { VariantProps } from 'class-variance-authority'
 import { cn } from '~/lib/utils'
 
-const dialogVariants = cva(
-  'z-50 grid w-full gap-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg border border-neutral-500 bg-white dark:border-neutral-900 dark:bg-neutral-950 dark:text-white',
-  {
-    variants: {
-      variant: {
-        default: 'fixed ',
-        inline: '',
-      },
-      position: {
-        default:
-          'left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
-        bl: 'left-6 bottom-6 data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
-        bc: 'left-[50%] top-[50%] translate-x-[-50%] bottom-6 data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
-        br: 'right-6 bottom-6 data-[state=closed]:slide-out-to-bottom-16 data-[state=open]:slide-in-from-bottom-16',
-      },
-      size: {
-        default: 'max-w-lg',
-        sm: 'max-w-md',
-        md: 'max-w-lg',
-        lg: 'max-w-xl',
-        xl: 'max-w-2xl',
-        fullscreen: 'w-screen h-screen',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      position: 'default',
-      size: 'default',
-    },
-  },
-)
-
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -80,32 +44,27 @@ function DialogOverlay({
   )
 }
 
-export interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
-    VariantProps<typeof dialogVariants> {}
-
 function DialogContent({
   className,
-  variant = 'default',
-  size,
-  position,
   children,
+  showCloseButton = true,
   ...props
-}: DialogContentProps) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
-        // className={cn(
-        //   "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-        //   className
-        // )}
-        className={cn(dialogVariants({ variant, size, position, className }))}
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
         {...props}
       >
         {children}
-        {
+        {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
             className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
@@ -113,7 +72,7 @@ function DialogContent({
             <XIcon />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
-        }
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   )