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

package/src/modules/appCatalog/ScreenshotManager.tsx

@@ -0,0 +1,193 @@
+import type { DragEndEvent } from '@dnd-kit/core'
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { Upload } from 'lucide-react'
+import { useCallback, useRef, useState } from 'react'
+import { Button } from '~/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '~/ui/card'
+import { ScreenshotItem } from './ScreenshotItem'
+
+export interface Screenshot {
+  id: string
+  url: string
+  order?: number
+}
+
+interface ScreenshotManagerProps {
+  screenshots: Array<Screenshot>
+  onScreenshotsChange: (screenshots: Array<Screenshot>) => void
+  onAddScreenshot?: (file: File) => Promise<{ id: string; url: string }>
+}
+
+export function ScreenshotManager({
+  screenshots,
+  onScreenshotsChange,
+  onAddScreenshot,
+}: ScreenshotManagerProps) {
+  const [isUploading, setIsUploading] = useState(false)
+  const [isDraggingOver, setIsDraggingOver] = useState(false)
+  const [screenshotList, setScreenshotList] =
+    useState<Array<Screenshot>>(screenshots)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 8 },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  )
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (over && active.id !== over.id) {
+      const oldIndex = screenshotList.findIndex((s) => s.id === active.id)
+      const newIndex = screenshotList.findIndex((s) => s.id === over.id)
+
+      const newList = arrayMove(screenshotList, oldIndex, newIndex)
+      setScreenshotList(newList)
+      onScreenshotsChange(newList)
+    }
+  }
+
+  const handleDeleteScreenshot = useCallback(
+    (id: string) => {
+      const newList = screenshotList.filter((s) => s.id !== id)
+      setScreenshotList(newList)
+      onScreenshotsChange(newList)
+    },
+    [screenshotList, onScreenshotsChange],
+  )
+
+  const handleFiles = async (file: File | null) => {
+    if (!file || !onAddScreenshot) return
+
+    setIsUploading(true)
+    try {
+      const newScreenshot = await onAddScreenshot(file)
+      const newList = [...screenshotList, newScreenshot]
+      setScreenshotList(newList)
+      onScreenshotsChange(newList)
+    } catch (error) {
+      console.error('Failed to upload screenshot:', error)
+    } finally {
+      setIsUploading(false)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    }
+  }
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    void handleFiles(e.target.files?.[0] ?? null)
+  }
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDraggingOver(false)
+    const file = e.dataTransfer.files[0] ?? null
+    void handleFiles(file)
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Screenshots</CardTitle>
+        <CardDescription>
+          Upload and organize screenshots. Drag to reorder, click X to delete.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleFileSelect}
+          disabled={isUploading || !onAddScreenshot}
+        />
+
+        <div
+          className={`border border-dashed rounded-md p-4 text-center transition-colors ${
+            isDraggingOver
+              ? 'border-primary bg-primary/5'
+              : 'border-border bg-muted/30'
+          } ${!onAddScreenshot ? 'opacity-60' : ''}`}
+          onDragOver={(e) => {
+            e.preventDefault()
+            if (!onAddScreenshot) return
+            setIsDraggingOver(true)
+          }}
+          onDragLeave={() => setIsDraggingOver(false)}
+          onDrop={handleDrop}
+        >
+          <div className="flex flex-col items-center gap-2">
+            <Upload className="w-5 h-5" />
+            <p className="text-sm text-muted-foreground">
+              Drag images here or
+              <Button
+                type="button"
+                variant="link"
+                className="px-1"
+                disabled={isUploading || !onAddScreenshot}
+                onClick={() => fileInputRef.current?.click()}
+              >
+                browse
+              </Button>
+              to upload
+            </p>
+            <Button
+              type="button"
+              disabled={isUploading || !onAddScreenshot}
+              onClick={() => fileInputRef.current?.click()}
+              variant="outline"
+            >
+              {isUploading ? 'Uploading...' : 'Select Image'}
+            </Button>
+          </div>
+        </div>
+
+        {screenshotList.length === 0 ? (
+          <div className="text-center py-8 text-muted-foreground">
+            No screenshots yet. Upload one to get started.
+          </div>
+        ) : (
+          <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+            <SortableContext
+              items={screenshotList.map((s) => s.id)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+                {screenshotList.map((screenshot) => (
+                  <ScreenshotItem
+                    key={screenshot.id}
+                    screenshot={screenshot}
+                    onDelete={() => handleDeleteScreenshot(screenshot.id)}
+                  />
+                ))}
+              </div>
+            </SortableContext>
+          </DndContext>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/modules/appCatalog/api/ApiQueryMagazineAppCatalog.ts

@@ -0,0 +1,12 @@
+import type { AppCatalogData } from '@env-hopper/backend-core'
+import { queryOptions } from '@tanstack/react-query'
+import { appCatalogFetcher } from '~/api/unsorted/appCatalogFetcher'
+
+export class ApiQueryMagazineAppCatalog {
+  static getAppCatalog() {
+    return queryOptions<AppCatalogData | undefined, Error>({
+      queryKey: ['appCatalog'],
+      queryFn: appCatalogFetcher(),
+    })
+  }
+}

package/src/modules/appCatalog/catalogRouteLoader.ts

@@ -0,0 +1,28 @@
+import type { QueryFunctionContext } from '@tanstack/react-query'
+import type { EhRouterContext } from '~/types/types'
+import { appCatalogFetcher } from '~/api/unsorted/appCatalogFetcher'
+
+export interface CatalogRouteLoaderCtx {
+  context: EhRouterContext
+}
+
+export async function catalogRouteLoader({
+  context,
+}: CatalogRouteLoaderCtx): Promise<void> {
+  // Try to load cached data from IndexedDB to pre-populate React Query cache
+  const queryFn = appCatalogFetcher({
+    db: context.db,
+    trpcClient: context.trpcClient,
+  })
+
+  // Create a minimal context object for the query function
+  const ctx: QueryFunctionContext = {
+    queryKey: ['appCatalog'],
+    meta: { db: context.db, trpcClient: context.trpcClient },
+    client: context.queryClient,
+    signal: new AbortController().signal,
+  }
+
+  // Call the query function to pre-populate cache
+  await queryFn(ctx)
+}

package/src/modules/appCatalog/context/AppCatalogContext.tsx

@@ -0,0 +1,46 @@
+import type { AppCategory, AppForCatalog } from '@env-hopper/backend-core'
+import { useQuery } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { createContext, use, useMemo } from 'react'
+import { ApiQueryMagazineAppCatalog } from '../api/ApiQueryMagazineAppCatalog'
+
+export interface AppCatalogContextIface {
+  apps: Array<AppForCatalog>
+  isLoadingApps: boolean
+  categories: Array<AppCategory>
+}
+
+export const AppCatalogContext = createContext<
+  AppCatalogContextIface | undefined
+>(undefined)
+
+interface AppCatalogProviderProps {
+  children: ReactNode
+}
+
+export function AppCatalogProvider({ children }: AppCatalogProviderProps) {
+  const { data, isLoading: isLoadingApps } = useQuery(
+    ApiQueryMagazineAppCatalog.getAppCatalog(),
+  )
+
+  const contextValue = useMemo<AppCatalogContextIface>(
+    () => ({
+      apps: data?.apps ?? [],
+      isLoadingApps,
+      categories: data?.categories ?? [],
+    }),
+    [data?.apps, data?.categories, isLoadingApps],
+  )
+
+  return <AppCatalogContext value={contextValue}>{children}</AppCatalogContext>
+}
+
+export function useAppCatalogContext(): AppCatalogContextIface {
+  const context = use(AppCatalogContext)
+  if (!context) {
+    throw new Error(
+      'useAppCatalogContext must be used within AppCatalogProvider',
+    )
+  }
+  return context
+}

package/src/modules/appCatalog/index.ts

@@ -0,0 +1,16 @@
+export { ApiQueryMagazineAppCatalog } from './api/ApiQueryMagazineAppCatalog'
+export {
+  AppCatalogProvider,
+  useAppCatalogContext,
+} from './context/AppCatalogContext'
+export type { AppCatalogContextIface } from './context/AppCatalogContext'
+export { AppCatalogFiltersCard } from './ui/grid/AppCatalogFiltersCard'
+export type {
+  AppCatalogDisplayMode,
+  AppCatalogScopeFilter,
+} from './ui/grid/AppCatalogFiltersCard'
+export { AppCatalogGrid } from './ui/grid/AppCatalogGrid'
+export { AppCatalogTable } from './ui/grid/AppCatalogTable'
+export { AppCatalogLayout } from './ui/layout/AppCatalogLayout'
+export type { AppCatalogLayoutProps } from './ui/layout/AppCatalogLayout'
+export { AppCatalogPage } from './ui/pages/AppCatalogPage'

package/src/modules/appCatalog/routeLoader.ts

@@ -0,0 +1,9 @@
+export interface AppCatalogLoaderReturn {
+  // App catalog doesn't need pre-loading, just return empty object
+}
+
+export async function appCatalogRouteLoader(): Promise<AppCatalogLoaderReturn> {
+  // Catalog mode doesn't require pre-loading data like hopper mode
+  // The AppCatalogLayout handles fetching and caching
+  return {}
+}

package/src/modules/appCatalog/ui/components/AppDetailModal.tsx

@@ -0,0 +1,283 @@
+import type { AppForCatalog } from '@env-hopper/backend-core'
+import { AppWindow, ExternalLink, X } from 'lucide-react'
+import React, { useEffect } from 'react'
+import { Badge } from '~/ui/badge'
+import { Button } from '~/ui/button'
+import { ScrollArea } from '~/ui/scroll-area'
+import { Separator } from '~/ui/separator'
+
+export interface AppDetailModalProps {
+  app: AppForCatalog
+  isOpen: boolean
+  onClose: () => 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 }: { app: AppForCatalog }) {
+  const [imageError, setImageError] = React.useState(false)
+
+  if (app.iconName && !imageError) {
+    return (
+      <img
+        src={getIconUrl(app.iconName)}
+        alt={`${app.displayName} icon`}
+        className="size-16 rounded-lg object-contain"
+        onError={() => setImageError(true)}
+      />
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center rounded-lg bg-primary/10 text-primary size-16">
+      <AppWindow className="size-8" />
+    </div>
+  )
+}
+
+function ScreenshotGallery({ app }: { app: AppForCatalog }) {
+  const [imageErrors, setImageErrors] = React.useState<Set<string>>(() => new Set())
+
+  const screenshotIds = app.screenshotIds || []
+  
+  if (screenshotIds.length === 0) {
+    return (
+      <div className="w-full h-96 bg-muted/30 rounded-lg flex items-center justify-center text-muted-foreground">
+        No screenshots available
+      </div>
+    )
+  }
+
+  const handleImageError = (id: string) => {
+    setImageErrors((prev) => new Set([...prev, id]))
+  }
+
+  return (
+    <div className="space-y-4">
+      {screenshotIds.map((screenshotId, index) => {
+        const screenshotUrl = `${import.meta.env.VITE_API_BASE_URL || 'http://localhost:4001'}/api/screenshots/${screenshotId}`
+        const hasError = imageErrors.has(screenshotId)
+
+        if (hasError) {
+          return null
+        }
+
+        return (
+          <div
+            key={screenshotId}
+            className="w-full rounded-lg overflow-hidden bg-muted/30"
+          >
+            <img
+              src={screenshotUrl}
+              alt={`${app.displayName} screenshot ${index + 1}`}
+              className="w-full h-auto object-contain max-h-[600px]"
+              onError={() => handleImageError(screenshotId)}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+function AccessSection({ app }: { app: AppForCatalog }) {
+  const { access } = app
+
+  if (!access) {
+    return (
+      <div className="space-y-2">
+        <div className="text-sm font-medium">Access Method</div>
+        <div className="text-sm text-muted-foreground">Contact administrator</div>
+      </div>
+    )
+  }
+
+  const getAccessLabel = () => {
+    switch (access.type) {
+      case 'self-service':
+        return 'Self-service access'
+      case 'ticketing':
+        return 'Access via ticketing'
+      case 'bot':
+        return 'Bot-based access'
+      case 'email':
+        return 'Email for access'
+      case 'documentation':
+        return 'See documentation'
+      case 'manual':
+        return 'Manual access'
+      default:
+        return 'Access available'
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="text-sm font-medium">Access Method</div>
+      <div className="text-sm text-muted-foreground">{getAccessLabel()}</div>
+      {access.type === 'documentation' && 'url' in access && typeof access.url === 'string' && (
+        <a
+          href={access.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sm text-primary hover:underline inline-flex items-center gap-1"
+        >
+          View documentation
+          <ExternalLink className="size-3" />
+        </a>
+      )}
+    </div>
+  )
+}
+
+export function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps) {
+  // Close on Escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      // Prevent body scroll when modal is open
+      document.body.style.overflow = 'hidden'
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = ''
+    }
+  }, [isOpen, onClose])
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      {/* Modal Container with wide borders */}
+      <div className="relative h-full w-full flex items-center justify-center p-4 sm:p-8 lg:p-16">
+        {/* Close Button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-6 right-6 z-10 size-10 rounded-full bg-background/80 backdrop-blur hover:bg-background"
+          onClick={onClose}
+        >
+          <X className="size-5" />
+          <span className="sr-only">Close</span>
+        </Button>
+
+        {/* Scrollable Content */}
+        <ScrollArea className="h-full w-full max-w-5xl" onClick={(e) => e.stopPropagation()}>
+          <div className="bg-background rounded-lg shadow-2xl border border-border p-8 space-y-8">
+            {/* Screenshots Section */}
+            <ScreenshotGallery app={app} />
+
+            <Separator />
+
+            {/* App Details Section */}
+            <div className="space-y-6">
+              {/* Header with Icon and Title */}
+              <div className="flex items-start gap-4">
+                <AppIcon app={app} />
+                <div className="flex-1 space-y-2">
+                  <h2 className="text-3xl font-bold">{app.displayName}</h2>
+                  {app.appUrl && (
+                    <a
+                      href={app.appUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-2 text-sm text-primary hover:underline"
+                    >
+                      Visit application
+                      <ExternalLink className="size-4" />
+                    </a>
+                  )}
+                </div>
+              </div>
+
+              {/* Description */}
+              {app.description && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">Description</div>
+                  <p className="text-muted-foreground">{app.description}</p>
+                </div>
+              )}
+
+              {/* Access Section */}
+              <AccessSection app={app} />
+
+              {/* Tags */}
+              {app.tags && app.tags.length > 0 && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">Tags</div>
+                  <div className="flex flex-wrap gap-2">
+                    {app.tags.map((tag) => (
+                      <Badge key={tag} variant="secondary">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Teams */}
+              {app.teams && app.teams.length > 0 && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">Teams</div>
+                  <div className="flex flex-wrap gap-2">
+                    {app.teams.map((team) => (
+                      <Badge key={team} variant="outline">
+                        {team}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Links */}
+              {app.links && app.links.length > 0 && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">Related Links</div>
+                  <div className="space-y-1">
+                    {app.links.map((link) => (
+                      <a
+                        key={link.url}
+                        href={link.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex text-sm text-primary hover:underline items-center gap-1"
+                      >
+                        {link.title || link.url}
+                        <ExternalLink className="size-3" />
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Notes */}
+              {app.notes && (
+                <div className="space-y-2">
+                  <div className="text-sm font-medium">Notes</div>
+                  <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                    {app.notes}
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,79 @@
+import { AppWindowIcon, LayoutGrid } from 'lucide-react'
+import { Button } from '~/ui/button'
+import { Card, CardContent } from '~/ui/card'
+import { RadioGroup, RadioGroupItem } from '~/ui/radio-group'
+import { Separator } from '~/ui/separator'
+
+export type AppCatalogScopeFilter = 'apps' | 'appsAndPages'
+export type AppCatalogDisplayMode = 'card' | 'grid'
+
+export interface AppCatalogFiltersCardProps {
+  scopeFilter: AppCatalogScopeFilter
+  onScopeFilterChange: (value: AppCatalogScopeFilter) => void
+  displayMode: AppCatalogDisplayMode
+  onDisplayModeChange: (value: AppCatalogDisplayMode) => void
+}
+
+export function AppCatalogFiltersCard({
+  scopeFilter,
+  onScopeFilterChange,
+  displayMode,
+  onDisplayModeChange,
+}: AppCatalogFiltersCardProps) {
+  return (
+    <Card className="py-4">
+      <CardContent className="px-6">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-medium">Scope</div>
+            <RadioGroup
+              value={scopeFilter}
+              onValueChange={(value) =>
+                onScopeFilterChange(value as AppCatalogScopeFilter)
+              }
+              className="grid gap-2"
+            >
+              <label className="flex items-center gap-2">
+                <RadioGroupItem value="apps" />
+                <span className="text-sm">Show only Apps</span>
+              </label>
+              <label className="flex items-center gap-2">
+                <RadioGroupItem value="appsAndPages" />
+                <span className="text-sm">Show Apps + Pages</span>
+              </label>
+            </RadioGroup>
+          </div>
+
+          <Separator orientation="vertical" className="hidden sm:block" />
+
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-medium">Display as</div>
+            <div className="inline-flex rounded-md border border-border">
+              <Button
+                type="button"
+                variant={displayMode === 'card' ? 'secondary' : 'ghost'}
+                size="lg"
+                className="rounded-none border-0"
+                onClick={() => onDisplayModeChange('card')}
+              >
+                <AppWindowIcon className="size-5" />
+                Card
+              </Button>
+              <Separator orientation="vertical" className="h-10" />
+              <Button
+                type="button"
+                variant={displayMode === 'grid' ? 'secondary' : 'ghost'}
+                size="lg"
+                className="rounded-none border-0"
+                onClick={() => onDisplayModeChange('grid')}
+              >
+                <LayoutGrid className="size-5" />
+                Grid
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}