@igstack/app-catalog-frontend-core 0.0.1

package/src/modules/config/GlobalConfigContext.tsx

@@ -0,0 +1,42 @@
+import { createContext, use, useMemo } from 'react'
+import type { ReactNode } from 'react'
+
+interface FrontendConfig {
+  microinteractionsToKeep: number
+  searchHistoryToKeep: number
+}
+
+export interface GlobalConfigContext {
+  config: FrontendConfig
+}
+
+const GlobalConfigContext = createContext<GlobalConfigContext | undefined>(
+  undefined,
+)
+
+interface GlobalConfigProviderProps {
+  children: ReactNode
+}
+
+export function GlobalConfigProvider({ children }: GlobalConfigProviderProps) {
+  const value: GlobalConfigContext = useMemo(
+    () => ({
+      config: {
+        microinteractionsToKeep: 1000,
+        searchHistoryToKeep: 1000,
+      },
+    }),
+    [],
+  )
+  return <GlobalConfigContext value={value}>{children}</GlobalConfigContext>
+}
+
+export function useGlobalConfig(): GlobalConfigContext {
+  const context = use(GlobalConfigContext)
+  if (context === undefined) {
+    throw new Error(
+      'useGlobalConfig must be used within a GlobalConfigProvider',
+    )
+  }
+  return context
+}

package/src/modules/config/HealthStateContext.tsx

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+import { createContext, use, useMemo, useState } from 'react'
+
+export type EnvHopperHealth = 'healthy' | 'degraded'
+
+export interface EnvHopperHealthStateBootstrapPart {
+  bootstrapApiError?: unknown
+}
+
+export interface HealthStateContext {
+  envHopperHealth: EnvHopperHealth
+  setEnvHopperHealth: (health: EnvHopperHealth) => void
+}
+
+const HealthStateContext = createContext<HealthStateContext | undefined>(
+  undefined,
+)
+
+interface HealthStateProviderProps {
+  children: ReactNode
+  bootstrapHealth: EnvHopperHealthStateBootstrapPart
+}
+
+export function HealthStateProvider({
+  children,
+}: HealthStateProviderProps) {
+  const [envHopperHealth, setEnvHopperHealth] =
+    useState<EnvHopperHealth>('healthy')
+
+  const value = useMemo(
+    () => ({
+      envHopperHealth,
+      setEnvHopperHealth,
+    }),
+    [envHopperHealth, setEnvHopperHealth],
+  )
+
+  return <HealthStateContext value={value}>{children}</HealthStateContext>
+}
+
+export function useEnvHopperHealth(): HealthStateContext {
+  const context = use(HealthStateContext)
+  if (context === undefined) {
+    throw new Error('useGlobalConfig must be used within a useEnvHopperHealth')
+  }
+  return context
+}

package/src/modules/gallery/Gallery.tsx

@@ -0,0 +1,317 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import useEmblaCarousel from 'embla-carousel-react'
+import { ChevronLeft, ChevronRight, ImageOff, X } from 'lucide-react'
+import { clamp } from 'radashi'
+import { useHotkeys } from 'react-hotkeys-hook'
+
+import { Button } from '~/ui/button'
+import { Spinner } from '~/ui/spinner'
+import { cn } from '~/lib/utils'
+
+export interface GalleryImage {
+  url: string
+  alt: string
+}
+
+export interface GalleryProps {
+  images: Array<GalleryImage>
+  initialIndex?: number
+  onIndexChange?: (index: number) => void
+  className?: string
+  title?: string
+}
+
+export function Gallery({
+  images,
+  initialIndex = 0,
+  onIndexChange,
+  className,
+  title,
+}: GalleryProps) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, align: 'center' })
+  const [currentIndex, setCurrentIndex] = useState(
+    clamp(initialIndex, 0, images.length - 1),
+  )
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [imageStates, setImageStates] = useState<
+    Record<number, 'loading' | 'loaded' | 'error'>
+  >(() => Object.fromEntries(images.map((_, i) => [i, 'loading'])))
+
+  // Reset image states when images array changes
+  useEffect(() => {
+    setImageStates(Object.fromEntries(images.map((_, i) => [i, 'loading'])))
+  }, [images])
+
+  // Stabilize onIndexChange callback with ref
+  const onIndexChangeRef = useRef(onIndexChange)
+  useEffect(() => {
+    onIndexChangeRef.current = onIndexChange
+  }, [onIndexChange])
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev()
+  }, [emblaApi])
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext()
+  }, [emblaApi])
+
+  // Sync current index with embla
+  const onSelect = useCallback(() => {
+    if (!emblaApi) return
+    const index = emblaApi.selectedScrollSnap()
+    setCurrentIndex(index)
+    onIndexChangeRef.current?.(index)
+  }, [emblaApi])
+
+  useEffect(() => {
+    if (!emblaApi) return
+    onSelect()
+    emblaApi.on('select', onSelect)
+    return () => {
+      emblaApi.off('select', onSelect)
+    }
+  }, [emblaApi, onSelect])
+
+  // Scroll to initial index on mount only
+  useEffect(() => {
+    if (emblaApi && typeof initialIndex === 'number') {
+      emblaApi.scrollTo(initialIndex)
+    }
+  }, [emblaApi, initialIndex])
+
+  // Keyboard navigation
+  useHotkeys(
+    'left',
+    (e) => {
+      e.preventDefault()
+      scrollPrev()
+    },
+    {
+      enabled: images.length > 1,
+      enableOnFormTags: false,
+      preventDefault: true,
+    },
+    [scrollPrev, images.length],
+  )
+  useHotkeys(
+    'right',
+    (e) => {
+      e.preventDefault()
+      scrollNext()
+    },
+    {
+      enabled: images.length > 1,
+      enableOnFormTags: false,
+      preventDefault: true,
+    },
+    [scrollNext, images.length],
+  )
+  useHotkeys(
+    'escape',
+    (e) => {
+      if (isFullscreen) {
+        e.preventDefault()
+        setIsFullscreen(false)
+      }
+    },
+    { enabled: isFullscreen, enableOnFormTags: false, preventDefault: true },
+    [isFullscreen],
+  )
+
+  // Mouse wheel navigation with debouncing
+  useEffect(() => {
+    if (!emblaApi || images.length <= 1) return
+
+    const emblaNode = emblaApi.rootNode()
+
+    let isScrolling = false
+    let scrollTimeout: NodeJS.Timeout
+
+    const handleWheel = (event: WheelEvent) => {
+      // Prevent page scroll when wheeling over gallery
+      event.preventDefault()
+
+      // Skip if already scrolling (debounce)
+      if (isScrolling) return
+
+      // Determine scroll direction
+      const deltaY = event.deltaY
+      const deltaX = event.deltaX
+
+      // Use vertical scroll primarily, fall back to horizontal
+      const delta = Math.abs(deltaY) > Math.abs(deltaX) ? deltaY : deltaX
+
+      if (delta > 0) {
+        // Scroll down/right -> next slide
+        scrollNext()
+      } else if (delta < 0) {
+        // Scroll up/left -> previous slide
+        scrollPrev()
+      }
+
+      // Set cooldown period
+      isScrolling = true
+      clearTimeout(scrollTimeout)
+      scrollTimeout = setTimeout(() => {
+        isScrolling = false
+      }, 300) // 300ms cooldown
+    }
+
+    emblaNode.addEventListener('wheel', handleWheel, { passive: false })
+
+    return () => {
+      emblaNode.removeEventListener('wheel', handleWheel)
+      clearTimeout(scrollTimeout)
+    }
+  }, [emblaApi, scrollNext, scrollPrev, images.length])
+
+  const currentImage = images[currentIndex]
+
+  const handleImageLoad = (index: number) => {
+    setImageStates((prev) => ({ ...prev, [index]: 'loaded' }))
+  }
+
+  const handleImageError = (index: number) => {
+    setImageStates((prev) => ({ ...prev, [index]: 'error' }))
+  }
+
+  // Fullscreen mode
+  if (isFullscreen && currentImage) {
+    const imageState = imageStates[currentIndex]
+    return (
+      <div
+        className="fixed inset-0 z-50 bg-background"
+        role="dialog"
+        aria-label="Fullscreen view"
+      >
+        {imageState === 'error' ? (
+          <div className="flex h-screen w-screen items-center justify-center">
+            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+              <ImageOff className="size-12" />
+              <p className="text-sm">Failed to load image</p>
+            </div>
+          </div>
+        ) : (
+          <div className="h-full w-full overflow-auto p-2">
+            {imageState !== 'loaded' && (
+              <div className="absolute inset-0 flex items-center justify-center">
+                <Spinner className="size-8" />
+              </div>
+            )}
+            <img
+              src={currentImage.url}
+              alt={currentImage.alt}
+              className="max-w-full h-auto"
+              onLoad={() => handleImageLoad(currentIndex)}
+              onError={() => handleImageError(currentIndex)}
+              style={{ opacity: imageState === 'loaded' ? 1 : 0 }}
+            />
+          </div>
+        )}
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setIsFullscreen(false)}
+          className="absolute top-4 right-4 z-10"
+          aria-label="Exit fullscreen"
+        >
+          <X className="size-4" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full flex-col min-h-0', className)}>
+      {/* Title Header */}
+      {title && (
+        <div className="px-6 py-4">
+          <h2 className="text-lg font-semibold">{title}</h2>
+        </div>
+      )}
+
+      {/* Carousel Viewport with Peek Effect */}
+      <div className="relative flex-1 min-h-0 overflow-hidden px-4">
+        <div ref={emblaRef} className="h-full overflow-hidden">
+          <div className="flex h-full gap-4">
+            {images.map((image, index) => {
+              const imageState = imageStates[index]
+              // Use 100% width for single image, 85% for multiple (peek effect)
+              const slideWidth = images.length === 1 ? '100%' : '85%'
+              return (
+                <div
+                  key={image.url}
+                  className={cn(
+                    'relative flex min-w-0 items-center justify-center transition-opacity duration-300 h-full',
+                    index !== currentIndex && 'opacity-40',
+                  )}
+                  style={{ flexBasis: slideWidth, flexShrink: 0, flexGrow: 0 }}
+                >
+                  {imageState === 'error' ? (
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      <ImageOff className="size-12" />
+                      <p className="text-xs">Failed to load</p>
+                    </div>
+                  ) : (
+                    <>
+                      {imageState !== 'loaded' && (
+                        <div className="absolute inset-0 flex items-center justify-center">
+                          <Spinner className="size-8" />
+                        </div>
+                      )}
+                      <img
+                        src={image.url}
+                        alt={image.alt}
+                        className="max-w-full max-h-full w-auto h-auto object-contain cursor-pointer border border-border/30 rounded"
+                        onClick={() => {
+                          if (index !== currentIndex) {
+                            emblaApi?.scrollTo(index)
+                          }
+                        }}
+                        onLoad={() => handleImageLoad(index)}
+                        onError={() => handleImageError(index)}
+                        style={{ opacity: imageState === 'loaded' ? 1 : 0 }}
+                        role="button"
+                        aria-label={`Navigate to ${image.alt}`}
+                      />
+                    </>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Controls */}
+      <div className="flex items-center justify-center gap-4 py-4">
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={scrollPrev}
+          disabled={images.length <= 1}
+          aria-label="Previous screenshot"
+          className="h-12 w-12"
+        >
+          <ChevronLeft className="h-12 w-12" />
+        </Button>
+
+        <div className="text-sm text-muted-foreground" aria-live="polite">
+          {currentIndex + 1} / {images.length}
+        </div>
+
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={scrollNext}
+          disabled={images.length <= 1}
+          aria-label="Next screenshot"
+          className="h-12 w-12"
+        >
+          <ChevronRight className="h-12 w-12" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/modules/icons/IconManagementPage.tsx

@@ -0,0 +1,245 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { Trash2, Upload } from 'lucide-react'
+import { useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '~/ui/card'
+import { Input } from '~/ui/input'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+
+type Icon = {
+  id: string
+  name: string
+  mimeType: string
+  fileSize: number
+  createdAt: string
+  updatedAt: string
+}
+
+const columnHelper = createColumnHelper<Icon>()
+
+const columns = [
+  columnHelper.display({
+    id: 'preview',
+    header: 'Preview',
+    cell: (props) => (
+      <div className="w-12 h-12 flex items-center justify-center">
+        <img
+          src={`/api/icons/${props.row.original.name}`}
+          alt={props.row.original.name}
+          className="max-w-full max-h-full object-contain"
+        />
+      </div>
+    ),
+  }),
+  columnHelper.accessor('name', {
+    header: 'Name',
+    cell: (info) => <span className="font-medium">{info.getValue()}</span>,
+  }),
+  columnHelper.accessor('mimeType', {
+    header: 'Type',
+  }),
+  columnHelper.accessor('fileSize', {
+    header: 'Size',
+    cell: (info) => `${(info.getValue() / 1024).toFixed(1)} KB`,
+  }),
+  columnHelper.accessor('createdAt', {
+    header: 'Created',
+    cell: (info) => new Date(info.getValue()).toLocaleDateString(),
+  }),
+  columnHelper.accessor('updatedAt', {
+    header: 'Updated',
+    cell: (info) => new Date(info.getValue()).toLocaleDateString(),
+  }),
+  columnHelper.display({
+    id: 'actions',
+    header: 'Actions',
+    cell: (props) => <IconActions icon={props.row.original} />,
+  }),
+]
+
+function IconActions({ icon }: { icon: Icon }) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+
+  const deleteMutation = useMutation({
+    ...trpc.icon.delete.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: trpc.icon.list.queryKey() })
+    },
+  })
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => deleteMutation.mutate({ id: icon.id })}
+      disabled={deleteMutation.isPending}
+    >
+      <Trash2 className="w-4 h-4" />
+    </Button>
+  )
+}
+
+function IconUploadForm() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [iconName, setIconName] = useState('')
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      setSelectedFile(file)
+      setIconName(file.name.replace(/\.[^/.]+$/, ''))
+    }
+  }
+
+  const handleUpload = async () => {
+    if (!selectedFile || !iconName) return
+
+    const formData = new FormData()
+    formData.append('name', iconName)
+    formData.append('icon', selectedFile)
+
+    const response = await fetch('/api/icons/upload', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (response.ok) {
+      queryClient.invalidateQueries({ queryKey: trpc.icon.list.queryKey() })
+      setSelectedFile(null)
+      setIconName('')
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    handleUpload()
+  }
+
+  return (
+    <Card className="mb-8">
+      <CardHeader>
+        <CardTitle>Upload Icon</CardTitle>
+        <CardDescription>
+          Upload SVG, PNG, JPEG, or WebP icons (stored as binary in database)
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit}>
+          <div className="flex gap-4 items-end">
+            <div className="flex-1">
+              <label className="block text-sm font-medium mb-2">
+                Icon Name
+              </label>
+              <Input
+                value={iconName}
+                onChange={(e) => setIconName(e.target.value)}
+                placeholder="icon-name"
+              />
+            </div>
+            <div className="flex-1">
+              <label className="block text-sm font-medium mb-2">File</label>
+              <Input
+                type="file"
+                accept="image/svg+xml,image/png,image/jpeg,image/webp"
+                onChange={handleFileSelect}
+              />
+            </div>
+            <Button type="submit" disabled={!selectedFile || !iconName}>
+              <Upload className="w-4 h-4 mr-2" />
+              Upload
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
+
+function IconTable() {
+  const trpc = useTRPC()
+  const { data: icons = [], isLoading } = useQuery(
+    trpc.icon.list.queryOptions(),
+  )
+
+  const table = useReactTable({
+    data: icons,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  if (isLoading) {
+    return <div className="p-8">Loading...</div>
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Icons ({icons.length})</CardTitle>
+        <CardDescription>Manage application icons</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {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}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function IconManagementPage() {
+  return (
+    <div className="container mx-auto p-8">
+      <IconUploadForm />
+      <IconTable />
+    </div>
+  )
+}