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

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>
+  )
+}

package/src/modules/pluginCore/PluginManagerContext.tsx

@@ -1,16 +1,9 @@
 import { objectify } from 'radashi'
-import { createContext, use, useCallback, useMemo, useState } from 'react'
-import { isEhPluginResourceJumpable } from './types'
+import { createContext, use, useMemo } from 'react'
 import type { ReactNode } from 'react'
-import type { PluginPageUrlAutocompleteItem } from '~/plugins/builtin/pageUrl/pageUrlTypes'
 import type { PartialRecord } from '~/types/utilityTypes'
-import type { ResourceJumpItem } from '../resourceJump/types'
 import type { PluginInterfaceForCore } from './makePluginManagerContext'
-import type {
-  EhPlugin,
-  EhPluginResouceJumpFactoryCtx,
-  PluginName,
-} from './types'
+import type { EhPlugin, PluginName } from './types'
 
 export interface PluginManagerContextIface {
   plugins: Array<EhPlugin>
@@ -18,14 +11,10 @@ export interface PluginManagerContextIface {
     PluginName,
     PluginManagerInterfaceForPlugins
   >
-  resouceJumpItems: PartialRecord<PluginName, Array<ResourceJumpItem>>
-  autocompleteFactoryItems: (
-    ctx: EhPluginResouceJumpFactoryCtx,
-  ) => Array<PluginPageUrlAutocompleteItem>
 }
 
 export interface PluginManagerInterfaceForPlugins {
-  setResouceJumps: (items: Array<ResourceJumpItem>) => void
+  // Future plugin interface methods can be added here
 }
 
 const PluginManagerContext = createContext<
@@ -42,40 +31,22 @@ export function PluginManagerContextProvider({
   children,
   plugins,
 }: PluginManagerProviderProps) {
-  const [resouceJumpItems, setResouceJumpsItems] = useState<
-    PartialRecord<PluginName, Array<ResourceJumpItem>>
-  >({})
-
-  const autocompleteFactoryItems = useCallback(
-    (
-      ctx: EhPluginResouceJumpFactoryCtx,
-    ): Array<PluginPageUrlAutocompleteItem> => {
-      return plugins
-        .filter((p) => isEhPluginResourceJumpable(p))
-        .flatMap((plugin) => plugin.factoryPageJumpAutocompleteItems(ctx))
-    },
-    [plugins],
-  )
+  const interfaceForPlugins = useMemo(() => {
+    return objectify(
+      plugins.map((p) => p.name),
+      (pluginName) => pluginName,
+      () => ({
+        // Future plugin interface methods can be added here
+      }),
+    )
+  }, [plugins])
 
   const value: PluginManagerContextIface = useMemo(() => {
     return {
       plugins,
-      interfaceForPlugins: objectify(
-        plugins.map((p) => p.name),
-        (pluginName) => pluginName,
-        (pluginName) => ({
-          setResouceJumps: (items: Array<ResourceJumpItem>) => {
-            setResouceJumpsItems((old) => ({
-              ...old,
-              ...{ [pluginName]: items },
-            }))
-          },
-        }),
-      ),
-      autocompleteFactoryItems,
-      resouceJumpItems,
+      interfaceForPlugins,
     }
-  }, [autocompleteFactoryItems, plugins, resouceJumpItems])
+  }, [plugins, interfaceForPlugins])
 
   return <PluginManagerContext value={value}>{children}</PluginManagerContext>
 }

package/src/modules/pluginCore/makePluginManagerContext.ts

@@ -1,35 +1,13 @@
-import { objectify } from 'radashi'
-import { isEhPluginResourceJumpable } from './types'
 import type { EhPlugin } from './types'
-import type { BootstrapConfigData } from '@env-hopper/backend-core'
-import type { ResourceJumpItem } from '../resourceJump/types'
 
 export interface PluginInterfaceForCore {
-  getResourceJumpsItems: (
-    config: BootstrapConfigData,
-  ) => Promise<Record<string, ResourceJumpItem>>
+  // Future plugin interface methods can be added here
 }
 
 export function makePluginInterfaceForCore(
-  plugins: Array<EhPlugin>,
+  _plugins: Array<EhPlugin>,
 ): PluginInterfaceForCore {
   return {
-    getResourceJumpsItems: async (bootstrapConfig: BootstrapConfigData) => {
-      const items = await Promise.all(
-        plugins.map((plugin) => {
-          if (isEhPluginResourceJumpable(plugin)) {
-            return plugin.factoryPageJumpAutocompleteItems({
-              bootstrapConfig,
-            })
-          }
-          return []
-        }),
-      )
-      return objectify(
-        items.flat(),
-        (item) => item.slug,
-        (item) => item,
-      )
-    },
+    // Future plugin interface methods can be added here
   }
 }

package/src/modules/pluginCore/types.ts

@@ -1,30 +1,11 @@
-import type {
-  BootstrapConfigData,
-  EhEnvIndexed,
-} from '@env-hopper/backend-core'
-import type { PluginPageUrlAutocompleteItem } from '~/plugins/builtin/pageUrl/pageUrlTypes'
-
 export interface PluginAsyncData<T> {
   pluginName: string
   data: T
   isLoaded: boolean
 }
 
-export interface EhPluginResourceJumpable extends EhPlugin {
-  factoryPageJumpAutocompleteItems: (
-    ctx: EhPluginResouceJumpFactoryCtx,
-  ) => Array<PluginPageUrlAutocompleteItem>
-}
-
 export interface EhPlugin {
   name: PluginName
-  // populatePageJumpItems(): Promise<ResouceJumpItem[]>
-}
-
-export function isEhPluginResourceJumpable(
-  plugin: EhPlugin,
-): plugin is EhPluginResourceJumpable {
-  return 'factoryPageJumpAutocompleteItems' in plugin
 }
 export interface BaseAppAutoCompletableParent {
   type: string
@@ -43,12 +24,4 @@ export interface BaseAutoCompleteItemRender {
   isDefaultGroupItem?: boolean
 }
 
-export interface EhPluginResouceJumpFactoryCtx {
-  bootstrapConfig: BootstrapConfigData
-}
-
-export interface EhPluginResouceJumpCtx {
-  env: EhEnvIndexed | undefined
-}
-
 export type PluginName = string

package/src/modules/resourceJump/api/ApiQueryMagazineResourceJump.ts

@@ -0,0 +1,52 @@
+import { queryOptions } from '@tanstack/react-query'
+import type {
+  AvailabilityMatrixData,
+  RenameRule,
+  RenameRuleParams,
+  ResourceJumpsData,
+  ResourceJumpsExtendedData,
+} from '@env-hopper/backend-core'
+import type { DbAware } from '~/types/ehTypes'
+import type { ResourceJumpHistoryItem } from '../types'
+import { resourceJumpsFetcher } from '~/api/unsorted/resourceJumpsFetcher'
+import { getTrpcFromMeta } from '~/util/reactQueryUtils'
+import { resourceJumpsExtendedFetcher } from '~/api/unsorted/resourceJumpsExtendedFetcher'
+
+export class ApiQueryMagazineResourceJump {
+  static getNameMigration(params: RenameRuleParams) {
+    return queryOptions<RenameRule | false, Error>({
+      queryKey: ['nameMigrations'],
+      queryFn: (ctx) => getTrpcFromMeta(ctx).tryFindRenameRule.query(params),
+    })
+  }
+
+  static getAvailabilityMatrix() {
+    return queryOptions<AvailabilityMatrixData, Error>({
+      queryKey: ['availabilityMatrix'],
+      queryFn: (ctx) => getTrpcFromMeta(ctx).availabilityMatrix.query(),
+    })
+  }
+
+  static getResourceJumps() {
+    const queryFn = resourceJumpsFetcher()
+    return queryOptions<ResourceJumpsData | undefined, Error>({
+      queryKey: ['resourceJumps'],
+      queryFn,
+    })
+  }
+
+  static getResourceJumpsExtended() {
+    const queryFn = resourceJumpsExtendedFetcher()
+    return queryOptions<ResourceJumpsExtendedData | undefined, Error>({
+      queryKey: ['resourceJumpsExtended'],
+      queryFn,
+    })
+  }
+
+  static getResourceJumpHistory({ db }: DbAware) {
+    return queryOptions<Array<ResourceJumpHistoryItem>, Error>({
+      queryKey: ['resourceJumpHistory'],
+      queryFn: () => db.resourceJumpHistory.toArray(),
+    })
+  }
+}