@igstack/app-catalog-frontend-core 0.0.1

package/src/modules/appCatalog/AppCatalogAdminPage.tsx

@@ -0,0 +1,274 @@
+import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Link } from '@tanstack/react-router'
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { Edit, Plus, Trash2 } 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'
+
+// Extended type with DB fields
+type AppForCatalogRow = AppForCatalog & {
+  slug: string
+  links?: Array<{ displayName?: string; url: string }>
+  screenshotIds?: Array<string>
+  createdAt: string
+  updatedAt: string
+}
+
+const columnHelper = createColumnHelper<AppForCatalogRow>()
+
+const columns = [
+  columnHelper.accessor('slug', {
+    header: 'Slug',
+    cell: (info) => <code className="text-xs truncate">{info.getValue()}</code>,
+    size: 100,
+  }),
+  columnHelper.accessor('displayName', {
+    header: 'Name',
+    cell: (info) => (
+      <Link
+        to="/admin/app-for-catalog/$id"
+        params={{ id: info.row.original.slug }}
+      >
+        <span className="font-medium cursor-pointer hover:underline truncate">
+          {info.getValue()}
+        </span>
+      </Link>
+    ),
+    size: 120,
+  }),
+  columnHelper.accessor('description', {
+    header: 'Description',
+    cell: (info) => {
+      const desc = info.getValue()
+      return (
+        <span className="text-sm text-muted-foreground truncate" title={desc}>
+          {desc}
+        </span>
+      )
+    },
+    size: 140,
+  }),
+  columnHelper.accessor('iconName', {
+    header: 'Icon',
+    cell: (info) => {
+      const iconName = info.getValue()
+      return iconName ? (
+        <div className="w-8 h-8 flex items-center justify-center shrink-0">
+          <img
+            src={`/api/assets/by-name/${iconName}`}
+            alt={iconName}
+            className="max-w-full max-h-full object-contain"
+          />
+        </div>
+      ) : (
+        <span className="text-sm text-muted-foreground">-</span>
+      )
+    },
+    size: 50,
+  }),
+  columnHelper.accessor('links', {
+    header: 'Links',
+    cell: (info) => (
+      <span className="text-sm truncate">{info.getValue()?.length || 0}</span>
+    ),
+    size: 50,
+  }),
+  columnHelper.accessor('screenshotIds', {
+    header: 'Screenshots',
+    cell: (info) => (
+      <span className="text-sm truncate">{info.getValue()?.length || 0}</span>
+    ),
+    size: 70,
+  }),
+  columnHelper.accessor('createdAt', {
+    header: 'Created',
+    cell: (info) => new Date(info.getValue()).toLocaleDateString(),
+    size: 100,
+  }),
+  columnHelper.display({
+    id: 'actions',
+    header: 'Actions',
+    cell: (props) => <AppActions app={props.row.original} />,
+    size: 70,
+  }),
+]
+
+function AppActions({ app }: { app: AppForCatalogRow }) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+
+  const deleteMutation = useMutation({
+    ...trpc.appCatalogAdmin.delete.mutationOptions(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: trpc.appCatalogAdmin.list.queryKey(),
+      })
+    },
+  })
+
+  return (
+    <div className="flex gap-2">
+      <Button variant="ghost" size="sm" asChild>
+        <Link to="/admin/app-for-catalog/$id" params={{ id: app.slug }}>
+          <Edit className="w-4 h-4" />
+        </Link>
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          if (
+            confirm(`Are you sure you want to delete "${app.displayName}"?`)
+          ) {
+            deleteMutation.mutate({ id: app.id })
+          }
+        }}
+        disabled={deleteMutation.isPending}
+      >
+        <Trash2 className="w-4 h-4" />
+      </Button>
+    </div>
+  )
+}
+
+export function AppCatalogAdminPage() {
+  const trpc = useTRPC()
+  const [globalFilter, setGlobalFilter] = useState('')
+
+  const { data: apps = [], isLoading } = useQuery({
+    ...trpc.appCatalogAdmin.list.queryOptions(),
+  })
+
+  const table = useReactTable({
+    data: apps as Array<AppForCatalogRow>,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      globalFilter,
+    },
+    onGlobalFilterChange: setGlobalFilter,
+  })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>App Catalog Management</CardTitle>
+              <CardDescription>
+                Manage apps in the catalog with full CRUD operations
+              </CardDescription>
+            </div>
+            <Button asChild>
+              <Link to="/admin/app-for-catalog/$id" params={{ id: 'new' }}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add App
+              </Link>
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Input
+            placeholder="Search apps by name, slug, or description..."
+            value={globalFilter || ''}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+            className="max-w-sm"
+          />
+          {isLoading ? (
+            <div className="text-center py-8">Loading...</div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <TableRow key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <TableHead
+                          key={header.id}
+                          style={{
+                            width: `${header.getSize()}px`,
+                            minWidth: `${header.getSize()}px`,
+                            maxWidth: `${header.getSize()}px`,
+                          }}
+                          className="overflow-hidden"
+                        >
+                          {header.isPlaceholder
+                            ? null
+                            : flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                        </TableHead>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableHeader>
+                <TableBody>
+                  {table.getRowModel().rows.length ? (
+                    table.getRowModel().rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.getVisibleCells().map((cell) => (
+                          <TableCell
+                            key={cell.id}
+                            style={{
+                              width: `${cell.column.getSize()}px`,
+                              minWidth: `${cell.column.getSize()}px`,
+                              maxWidth: `${cell.column.getSize()}px`,
+                            }}
+                            className="overflow-hidden"
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="h-24 text-center"
+                      >
+                        No apps found.
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/src/modules/appCatalog/ScreenshotItem.tsx

@@ -0,0 +1,59 @@
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical, X } from 'lucide-react'
+import { Button } from '~/ui/button'
+import type { Screenshot } from './ScreenshotManager'
+
+interface ScreenshotItemProps {
+  screenshot: Screenshot
+  onDelete: () => void
+}
+
+export function ScreenshotItem({ screenshot, onDelete }: ScreenshotItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: screenshot.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  }
+
+  return (
+    <div ref={setNodeRef} style={style} className="relative group">
+      <div className="aspect-video rounded-md overflow-hidden border border-border bg-muted">
+        <img
+          src={screenshot.url}
+          alt="Screenshot"
+          className="w-full h-full object-cover"
+        />
+      </div>
+
+      <div className="absolute inset-0 rounded-md bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-white hover:bg-white/20"
+          {...attributes}
+          {...listeners}
+        >
+          <GripVertical className="w-4 h-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-white hover:bg-red-500/20"
+          onClick={onDelete}
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}

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 '@igstack/app-catalog-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,52 @@
+import type {
+  AppApprovalMethod,
+  AppForCatalog,
+  GroupingTagDefinition,
+} from '@igstack/app-catalog-backend-core'
+import { useQuery } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { createContext, use, useMemo } from 'react'
+import { ApiQueryMagazineAppCatalog } from '~/modules/appCatalog'
+
+export interface AppCatalogContextIface {
+  apps: Array<AppForCatalog>
+  isLoadingApps: boolean
+  tagsDefinitions: Array<GroupingTagDefinition>
+  approvalMethods: Array<AppApprovalMethod>
+}
+
+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,
+      tagsDefinitions: data?.tagsDefinitions ?? [],
+      approvalMethods: data?.approvalMethods ?? [],
+    }),
+    [data?.approvalMethods, data?.apps, data?.tagsDefinitions, 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 {}
+}