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

package/src/modules/fuzzyMatchLogic/postFiltration.ts

@@ -1,5 +1,12 @@
 import { normalize } from './utils'
+import type { Id } from 'flexsearch'
 import type { FuzzySearchInputEntry } from './types'
+import { tokenize } from '~/modules/fuzzyMatchLogic/tokenize'
+
+export type FuzzySearchPostFilterRow = {
+  id: Id
+  entry: FuzzySearchInputEntry
+}
 
 export function isTokensConsequent(
   foundTokens: Array<string>,
@@ -23,6 +30,132 @@ export function isTokensConsequent(
   return foundTokens.length === 0
 }
 
+/**
+ * Post-filter + promote highest-intent matches for the current FlexSearch-based pipeline.
+ *
+ * Rules:
+ * - Always require a basic in-order match.
+ * - For multi-token queries, require exact token matches in-order (so standalone symbols like '#'
+ *   are respected).
+ * - Keep only rows with the maximum number of matched tokens (so "order #" prefers entries
+ *   containing both tokens over entries containing only "order").
+ */
+export function postFiltration(
+  raw: Array<FuzzySearchPostFilterRow>,
+  needle: string,
+): Array<FuzzySearchPostFilterRow> {
+  const needleTokenList = tokenize(needle)
+
+  function matchNeedleTokenAt(
+    entryTokens: Array<string>,
+    startIndex: number,
+    needleToken: string,
+  ): { ok: boolean; nextIndex: number } {
+    if (startIndex >= entryTokens.length) {
+      return { ok: false, nextIndex: startIndex }
+    }
+
+    let remaining = needleToken
+    let j = startIndex
+
+    while (j < entryTokens.length) {
+      const eTok = entryTokens[j]!
+
+      // Entry token fully covers the remaining needle token.
+      if (eTok.startsWith(remaining)) {
+        return { ok: true, nextIndex: j + 1 }
+      }
+
+      // Entry token can consume the next part of the needle token.
+      if (remaining.startsWith(eTok)) {
+        remaining = remaining.slice(eTok.length)
+        j++
+        if (remaining.length === 0) {
+          return { ok: true, nextIndex: j }
+        }
+        continue
+      }
+
+      // Mismatch: once we've started consuming, require consecutive tokens.
+      return { ok: false, nextIndex: startIndex }
+    }
+
+    return { ok: false, nextIndex: startIndex }
+  }
+
+  const passed: Array<FuzzySearchPostFilterRow & { tokenMatches: number }> = []
+
+  for (const row of raw) {
+    const entryTokenList = tokenize(row.entry.displayName)
+    entryTokenList.join('')
+
+    // Baseline filter:
+    // - multi-token query: require exact standalone-token matches in order
+    // - single-token query: allow character-in-order matching (permits env1 -> env-xxx-1)
+    let matchedTokens = 0
+    for (let i = 0, j = 0; i < needleTokenList.length; i++) {
+      const nTok = needleTokenList[i]!
+
+      let matchedThisNeedleToken = false
+      while (j < entryTokenList.length) {
+        const eTok = entryTokenList[j]!
+
+        if (eTok.startsWith(nTok)) {
+          matchedThisNeedleToken = true
+          matchedTokens++
+          j++
+          break
+        }
+
+        // Allow a single needle token (e.g. "abcdev") to be satisfied by multiple
+        // consecutive entry tokens (e.g. "abc" + "dev") by consuming them in order.
+        if (nTok.startsWith(eTok)) {
+          const res = matchNeedleTokenAt(entryTokenList, j, nTok)
+          if (res.ok) {
+            matchedThisNeedleToken = true
+            matchedTokens++
+            j = res.nextIndex
+            break
+          }
+        }
+
+        j++
+      }
+
+      if (!matchedThisNeedleToken) {
+        break
+      }
+    }
+    if (matchedTokens !== needleTokenList.length) {
+      continue
+    }
+
+    // Token coverage: count how many needle tokens match entry tokens in-order.
+    let matched = 0
+    for (
+      let i = 0, j = 0;
+      i < needleTokenList.length && j < entryTokenList.length;
+    ) {
+      const nTok = needleTokenList[i]!
+      const eTok = entryTokenList[j]!
+      if (eTok === nTok) {
+        matched++
+        i++
+        j++
+      } else {
+        j++
+      }
+    }
+
+    passed.push({ ...row, tokenMatches: matched })
+  }
+
+  const maxMatches = passed.reduce((acc, r) => Math.max(acc, r.tokenMatches), 0)
+  return passed
+    .filter((r) => r.tokenMatches === maxMatches)
+    .map(({ id, entry }) => ({ id, entry }))
+}
+
 // export function postFiltration(
 //   raw: Array<FuzzySearchPreliminaryResult>,
 // ): Array<FuzzySearchPreliminaryResult> {

package/src/modules/fuzzyMatchLogic/scoring.ts

@@ -1,3 +1,4 @@
+import { positionBonus } from './features/positionBonus'
 import { prefixFrac } from './features/prefixFrac'
 import type {
   FuzzySearchPreliminaryResult,
@@ -7,6 +8,10 @@ import type {
 const W = {
   prefixFrac: 1.3,
   prefixFracTokenMiddles: 0.1,
+  positionBonus: 0.08,
+  // How fast the bonus decays as the first match appears later in the string.
+  // Higher = harsher penalty for late matches.
+  positionDecayAlpha: 0.08,
 }
 
 export function score(
@@ -23,10 +28,11 @@ export function score(
     // const pfTokens = prefixFracTokenMiddles(entry, foundTokens)
 
     // const tc = tokenCoverage(qTokens, norm);
-    // const pb = positionBonus(q, norm, W.positionDecayAlpha);
+    const pb = positionBonus(needle, norm, W.positionDecayAlpha)
 
     let scoreValue = 0
     scoreValue += W.prefixFrac * pf
+    scoreValue += W.positionBonus * pb
 
     return { entry, score: scoreValue }
   })

package/src/modules/fuzzyMatchLogic/tokenize.ts

@@ -15,10 +15,21 @@ const TOKEN_SPLIT = new RegExp(
 )
 
 export function tokenize(str: string): Array<string> {
-  return str
+  // We mostly split on whitespace/punctuation/symbols, but we also want to keep
+  // certain standalone symbols (like '#') as their own tokens so queries like
+  // "order #" can specifically match entries containing "#".
+  const raw = str
     .split(TOKEN_SPLIT)
     .filter(Boolean)
     .map((s) => s.toLowerCase())
+
+  const symbolTokens = [...str]
+    .filter((c) => /[#]/.test(c))
+    .map((c) => c.toLowerCase())
+
+  // Preserve original ordering as best-effort by appending symbols; for our
+  // current use cases it’s enough that the symbol token exists.
+  return [...raw, ...symbolTokens]
 }
 
 export function enrichTokensForIndex(tokens: Array<string>): Array<string> {

package/src/modules/fuzzyMatchLogic/types.ts

@@ -7,6 +7,7 @@ export interface FuzzySearchInputEntry {
 
 export interface FuzzySearchContext {
   index: FuzzySearchIndex
+  freqGetter?: (slug: string) => number
 }
 
 export interface FuzzySearchIndex {

package/src/modules/icons/IconManagementPage.tsx

@@ -0,0 +1,237 @@
+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.id}`}
+          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('')
+    }
+  }
+
+  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>
+        <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
+            onClick={handleUpload}
+            disabled={!selectedFile || !iconName}
+          >
+            <Upload className="w-4 h-4 mr-2" />
+            Upload
+          </Button>
+        </div>
+      </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(),
+    })
+  }
+}