@env-hopper/frontend-core 2.0.1-alpha

package/src/routeTree.gen.ts

@@ -0,0 +1,249 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as LayoutRouteImport } from './routes/_layout'
+import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
+import { Route as LayoutEnvEnvSlugRouteImport } from './routes/_layout/env/$envSlug'
+import { Route as LayoutAppAppSlugRouteImport } from './routes/_layout/app/$appSlug'
+import { Route as LayoutEnvEnvSlugSubSubValueRouteImport } from './routes/_layout/env/$envSlug/sub/$subValue'
+import { Route as LayoutEnvEnvSlugAppAppSlugRouteImport } from './routes/_layout/env/$envSlug/app/$appSlug'
+import { Route as LayoutAppAppSlugSubSubValueRouteImport } from './routes/_layout/app/$appSlug/sub/$subValue'
+import { Route as LayoutEnvEnvSlugAppAppSlugSubSubValueRouteImport } from './routes/_layout/env/$envSlug/app/$appSlug/sub/$subValue'
+
+const LayoutRoute = LayoutRouteImport.update({
+  id: '/_layout',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const LayoutIndexRoute = LayoutIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => LayoutRoute,
+} as any)
+const LayoutEnvEnvSlugRoute = LayoutEnvEnvSlugRouteImport.update({
+  id: '/env/$envSlug',
+  path: '/env/$envSlug',
+  getParentRoute: () => LayoutRoute,
+} as any)
+const LayoutAppAppSlugRoute = LayoutAppAppSlugRouteImport.update({
+  id: '/app/$appSlug',
+  path: '/app/$appSlug',
+  getParentRoute: () => LayoutRoute,
+} as any)
+const LayoutEnvEnvSlugSubSubValueRoute =
+  LayoutEnvEnvSlugSubSubValueRouteImport.update({
+    id: '/sub/$subValue',
+    path: '/sub/$subValue',
+    getParentRoute: () => LayoutEnvEnvSlugRoute,
+  } as any)
+const LayoutEnvEnvSlugAppAppSlugRoute =
+  LayoutEnvEnvSlugAppAppSlugRouteImport.update({
+    id: '/app/$appSlug',
+    path: '/app/$appSlug',
+    getParentRoute: () => LayoutEnvEnvSlugRoute,
+  } as any)
+const LayoutAppAppSlugSubSubValueRoute =
+  LayoutAppAppSlugSubSubValueRouteImport.update({
+    id: '/sub/$subValue',
+    path: '/sub/$subValue',
+    getParentRoute: () => LayoutAppAppSlugRoute,
+  } as any)
+const LayoutEnvEnvSlugAppAppSlugSubSubValueRoute =
+  LayoutEnvEnvSlugAppAppSlugSubSubValueRouteImport.update({
+    id: '/sub/$subValue',
+    path: '/sub/$subValue',
+    getParentRoute: () => LayoutEnvEnvSlugAppAppSlugRoute,
+  } as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof LayoutIndexRoute
+  '/app/$appSlug': typeof LayoutAppAppSlugRouteWithChildren
+  '/env/$envSlug': typeof LayoutEnvEnvSlugRouteWithChildren
+  '/app/$appSlug/sub/$subValue': typeof LayoutAppAppSlugSubSubValueRoute
+  '/env/$envSlug/app/$appSlug': typeof LayoutEnvEnvSlugAppAppSlugRouteWithChildren
+  '/env/$envSlug/sub/$subValue': typeof LayoutEnvEnvSlugSubSubValueRoute
+  '/env/$envSlug/app/$appSlug/sub/$subValue': typeof LayoutEnvEnvSlugAppAppSlugSubSubValueRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof LayoutIndexRoute
+  '/app/$appSlug': typeof LayoutAppAppSlugRouteWithChildren
+  '/env/$envSlug': typeof LayoutEnvEnvSlugRouteWithChildren
+  '/app/$appSlug/sub/$subValue': typeof LayoutAppAppSlugSubSubValueRoute
+  '/env/$envSlug/app/$appSlug': typeof LayoutEnvEnvSlugAppAppSlugRouteWithChildren
+  '/env/$envSlug/sub/$subValue': typeof LayoutEnvEnvSlugSubSubValueRoute
+  '/env/$envSlug/app/$appSlug/sub/$subValue': typeof LayoutEnvEnvSlugAppAppSlugSubSubValueRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/_layout': typeof LayoutRouteWithChildren
+  '/_layout/': typeof LayoutIndexRoute
+  '/_layout/app/$appSlug': typeof LayoutAppAppSlugRouteWithChildren
+  '/_layout/env/$envSlug': typeof LayoutEnvEnvSlugRouteWithChildren
+  '/_layout/app/$appSlug/sub/$subValue': typeof LayoutAppAppSlugSubSubValueRoute
+  '/_layout/env/$envSlug/app/$appSlug': typeof LayoutEnvEnvSlugAppAppSlugRouteWithChildren
+  '/_layout/env/$envSlug/sub/$subValue': typeof LayoutEnvEnvSlugSubSubValueRoute
+  '/_layout/env/$envSlug/app/$appSlug/sub/$subValue': typeof LayoutEnvEnvSlugAppAppSlugSubSubValueRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths:
+    | '/'
+    | '/app/$appSlug'
+    | '/env/$envSlug'
+    | '/app/$appSlug/sub/$subValue'
+    | '/env/$envSlug/app/$appSlug'
+    | '/env/$envSlug/sub/$subValue'
+    | '/env/$envSlug/app/$appSlug/sub/$subValue'
+  fileRoutesByTo: FileRoutesByTo
+  to:
+    | '/'
+    | '/app/$appSlug'
+    | '/env/$envSlug'
+    | '/app/$appSlug/sub/$subValue'
+    | '/env/$envSlug/app/$appSlug'
+    | '/env/$envSlug/sub/$subValue'
+    | '/env/$envSlug/app/$appSlug/sub/$subValue'
+  id:
+    | '__root__'
+    | '/_layout'
+    | '/_layout/'
+    | '/_layout/app/$appSlug'
+    | '/_layout/env/$envSlug'
+    | '/_layout/app/$appSlug/sub/$subValue'
+    | '/_layout/env/$envSlug/app/$appSlug'
+    | '/_layout/env/$envSlug/sub/$subValue'
+    | '/_layout/env/$envSlug/app/$appSlug/sub/$subValue'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  LayoutRoute: typeof LayoutRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/_layout': {
+      id: '/_layout'
+      path: ''
+      fullPath: ''
+      preLoaderRoute: typeof LayoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/_layout/': {
+      id: '/_layout/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof LayoutIndexRouteImport
+      parentRoute: typeof LayoutRoute
+    }
+    '/_layout/env/$envSlug': {
+      id: '/_layout/env/$envSlug'
+      path: '/env/$envSlug'
+      fullPath: '/env/$envSlug'
+      preLoaderRoute: typeof LayoutEnvEnvSlugRouteImport
+      parentRoute: typeof LayoutRoute
+    }
+    '/_layout/app/$appSlug': {
+      id: '/_layout/app/$appSlug'
+      path: '/app/$appSlug'
+      fullPath: '/app/$appSlug'
+      preLoaderRoute: typeof LayoutAppAppSlugRouteImport
+      parentRoute: typeof LayoutRoute
+    }
+    '/_layout/env/$envSlug/sub/$subValue': {
+      id: '/_layout/env/$envSlug/sub/$subValue'
+      path: '/sub/$subValue'
+      fullPath: '/env/$envSlug/sub/$subValue'
+      preLoaderRoute: typeof LayoutEnvEnvSlugSubSubValueRouteImport
+      parentRoute: typeof LayoutEnvEnvSlugRoute
+    }
+    '/_layout/env/$envSlug/app/$appSlug': {
+      id: '/_layout/env/$envSlug/app/$appSlug'
+      path: '/app/$appSlug'
+      fullPath: '/env/$envSlug/app/$appSlug'
+      preLoaderRoute: typeof LayoutEnvEnvSlugAppAppSlugRouteImport
+      parentRoute: typeof LayoutEnvEnvSlugRoute
+    }
+    '/_layout/app/$appSlug/sub/$subValue': {
+      id: '/_layout/app/$appSlug/sub/$subValue'
+      path: '/sub/$subValue'
+      fullPath: '/app/$appSlug/sub/$subValue'
+      preLoaderRoute: typeof LayoutAppAppSlugSubSubValueRouteImport
+      parentRoute: typeof LayoutAppAppSlugRoute
+    }
+    '/_layout/env/$envSlug/app/$appSlug/sub/$subValue': {
+      id: '/_layout/env/$envSlug/app/$appSlug/sub/$subValue'
+      path: '/sub/$subValue'
+      fullPath: '/env/$envSlug/app/$appSlug/sub/$subValue'
+      preLoaderRoute: typeof LayoutEnvEnvSlugAppAppSlugSubSubValueRouteImport
+      parentRoute: typeof LayoutEnvEnvSlugAppAppSlugRoute
+    }
+  }
+}
+
+interface LayoutAppAppSlugRouteChildren {
+  LayoutAppAppSlugSubSubValueRoute: typeof LayoutAppAppSlugSubSubValueRoute
+}
+
+const LayoutAppAppSlugRouteChildren: LayoutAppAppSlugRouteChildren = {
+  LayoutAppAppSlugSubSubValueRoute: LayoutAppAppSlugSubSubValueRoute,
+}
+
+const LayoutAppAppSlugRouteWithChildren =
+  LayoutAppAppSlugRoute._addFileChildren(LayoutAppAppSlugRouteChildren)
+
+interface LayoutEnvEnvSlugAppAppSlugRouteChildren {
+  LayoutEnvEnvSlugAppAppSlugSubSubValueRoute: typeof LayoutEnvEnvSlugAppAppSlugSubSubValueRoute
+}
+
+const LayoutEnvEnvSlugAppAppSlugRouteChildren: LayoutEnvEnvSlugAppAppSlugRouteChildren =
+  {
+    LayoutEnvEnvSlugAppAppSlugSubSubValueRoute:
+      LayoutEnvEnvSlugAppAppSlugSubSubValueRoute,
+  }
+
+const LayoutEnvEnvSlugAppAppSlugRouteWithChildren =
+  LayoutEnvEnvSlugAppAppSlugRoute._addFileChildren(
+    LayoutEnvEnvSlugAppAppSlugRouteChildren,
+  )
+
+interface LayoutEnvEnvSlugRouteChildren {
+  LayoutEnvEnvSlugAppAppSlugRoute: typeof LayoutEnvEnvSlugAppAppSlugRouteWithChildren
+  LayoutEnvEnvSlugSubSubValueRoute: typeof LayoutEnvEnvSlugSubSubValueRoute
+}
+
+const LayoutEnvEnvSlugRouteChildren: LayoutEnvEnvSlugRouteChildren = {
+  LayoutEnvEnvSlugAppAppSlugRoute: LayoutEnvEnvSlugAppAppSlugRouteWithChildren,
+  LayoutEnvEnvSlugSubSubValueRoute: LayoutEnvEnvSlugSubSubValueRoute,
+}
+
+const LayoutEnvEnvSlugRouteWithChildren =
+  LayoutEnvEnvSlugRoute._addFileChildren(LayoutEnvEnvSlugRouteChildren)
+
+interface LayoutRouteChildren {
+  LayoutIndexRoute: typeof LayoutIndexRoute
+  LayoutAppAppSlugRoute: typeof LayoutAppAppSlugRouteWithChildren
+  LayoutEnvEnvSlugRoute: typeof LayoutEnvEnvSlugRouteWithChildren
+}
+
+const LayoutRouteChildren: LayoutRouteChildren = {
+  LayoutIndexRoute: LayoutIndexRoute,
+  LayoutAppAppSlugRoute: LayoutAppAppSlugRouteWithChildren,
+  LayoutEnvEnvSlugRoute: LayoutEnvEnvSlugRouteWithChildren,
+}
+
+const LayoutRouteWithChildren =
+  LayoutRoute._addFileChildren(LayoutRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  LayoutRoute: LayoutRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/src/routes/__root.tsx

@@ -0,0 +1,23 @@
+import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import type { EhRouterContext } from '~/types/types'
+import { RooutErrorPage } from '~/ui/components/error/RooutErrorPage'
+import { NotFoundError } from '~/ui/error/NotFoundError'
+import { LoadingScreen } from '~/ui/layout/LoadingScreen'
+
+export const Route = createRootRouteWithContext<EhRouterContext>()({
+  component: RootRoute,
+  errorComponent: RooutErrorPage,
+  pendingComponent: () => <LoadingScreen />,
+  notFoundComponent: () => <NotFoundError />,
+  wrapInSuspense: true,
+})
+
+function RootRoute() {
+  return (
+    <div className="min-h-screen bg-base-200">
+      <Outlet />
+      {import.meta.env.MODE === 'dev' ? <TanStackRouterDevtools /> : null}
+    </div>
+  )
+}

package/src/routes/_layout/app/$appSlug/sub/$subValue.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute('/_layout/app/$appSlug/sub/$subValue')({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout/app/$appSlug.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute('/_layout/app/$appSlug')({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout/env/$envSlug/app/$appSlug/sub/$subValue.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute(
+  '/_layout/env/$envSlug/app/$appSlug/sub/$subValue',
+)({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout/env/$envSlug/app/$appSlug.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute('/_layout/env/$envSlug/app/$appSlug')({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout/env/$envSlug/sub/$subValue.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute('/_layout/env/$envSlug/sub/$subValue')({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout/env/$envSlug.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute('/_layout/env/$envSlug')({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout/index.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { routeLoader } from '~/modules/resourceJump/routeLoader'
+import { ResourceJumpLayout } from '~/modules/resourceJump/ui/ResouceJumpLayout'
+
+export const Route = createFileRoute('/_layout/')({
+  component: RouteComponent,
+  loader(ctx) {
+    return routeLoader(ctx)
+  },
+})
+
+function RouteComponent() {
+  const urlParams = Route.useLoaderData()
+  return <ResourceJumpLayout loaderData={urlParams} />
+}

package/src/routes/_layout.tsx

@@ -0,0 +1,9 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return <Outlet />
+}

package/src/types/ehTypes.ts

@@ -0,0 +1,40 @@
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { TRPCClient } from '@trpc/client'
+import type { EhDb } from '~/userDb/EhDb'
+
+export interface EhEnvIndexed {
+  slug: string
+  displayName: string
+}
+
+// EhAppIndexed is now imported from @env-hopper/backend-core
+
+export interface EhAppPage {
+  slug: string
+  displayName: string
+}
+
+// Base interface for dropdown content components
+export interface BaseDropdownContentProps {
+  searchValue?: string
+  onSelect?: (value: string) => void
+  getMenuProps?: () => any
+  getItemProps?: (options: any) => any
+  highlightedIndex?: number
+  isOpen?: boolean
+  isUntouched: boolean
+}
+
+export interface EhUrlParams {
+  envId?: string
+  appId?: string
+  subValue?: string
+}
+
+export interface DbAware {
+  db: EhDb
+}
+
+export interface TrpcAware {
+  trpcClient: TRPCClient<TRPCRouter>
+}

package/src/types/slateTypes.ts

@@ -0,0 +1,22 @@
+import type { BaseEditor } from 'slate'
+import type { ReactEditor } from 'slate-react'
+
+type TagElement = {
+  type: 'tag'
+  children: Array<CustomText>
+  selected: boolean
+}
+type InterTagElement = { type: 'inter-tag'; children: Array<CustomText> }
+type TagContainer = { type: 'tag-container'; children: Array<CustomText> }
+type CustomText = { text: string }
+
+export type CustomElement = TagElement | TagContainer | InterTagElement
+export type CustomEditor = BaseEditor & ReactEditor
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: CustomEditor
+    Element: CustomElement
+    Text: CustomText
+  }
+}

package/src/types/tanstackQuery.ts

@@ -0,0 +1,14 @@
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+
+export interface EhReactQueryMeta extends Record<string, unknown> {
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    queryMeta: EhReactQueryMeta
+    mutationMeta: EhReactQueryMeta
+  }
+}

package/src/types/types.ts

@@ -0,0 +1,20 @@
+/// <reference types="vite-plugin-pwa/client" />
+
+import type { RouterHistory } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { EhDb } from '~/userDb/EhDb'
+import type { EhPlugin } from '~/modules/pluginCore/types'
+
+export interface EhRouterContext {
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+  db: EhDb
+  plugins: Array<EhPlugin>
+}
+
+export interface EhRouterInitParams {
+  history: RouterHistory
+  context: EhRouterContext
+}

package/src/types/userBehaviourTypes.ts

@@ -0,0 +1,100 @@
+export interface SearchInteraction {
+  dateUtcTimestamp: number
+  query: string
+  selection: SearchSelection
+}
+
+export type SearchSelection =
+  | {
+      type: 'env'
+      envSlug: string
+    }
+  | {
+      type: 'app'
+      appSlug: string
+    }
+  | {
+      type: 'appPage'
+      appPageSlug: AppPageSlug
+      appPageContext?: AppPageContext
+    }
+  | {
+      type: 'envAppPage'
+      envSlug: string
+      appPageSlug: AppPageSlug
+      appPageContext?: AppPageContext
+    }
+  | {
+      type: 'envAction'
+      envSlug: string
+      actionName: string
+    }
+
+export interface MicroInteraction {
+  dateUtcTimestamp: number
+  context: MicroInteractionContext
+  action: Action
+}
+
+export interface MicroInteractionContext {
+  envSlug?: string
+  appSlug?: string
+  appPageSlug?: AppPageSlug
+}
+
+export type Action =
+  | PageJumpAction
+  | ConfigSearchAction
+  | EnvSelectionAction
+  | AppSelectionAction
+  | AppPageSelectionAction
+  | EnvAction
+
+export interface EnvSelectionAction {
+  actionType: 'envSelection'
+  envSlug: string | undefined
+}
+
+export interface AppSelectionAction {
+  actionType: 'appSelection'
+  appSlug: string | undefined
+}
+
+export interface AppPageSelectionAction {
+  actionType: 'appPageSelection'
+  appPageSlug: AppPageSlug
+}
+
+export interface PageJumpAction {
+  actionType: 'pageJump'
+  envSlug: string
+  appPageSlug: AppPageSlug
+  appPageContext?: AppPageContext
+}
+
+export interface EnvAction {
+  actionType: 'envAction'
+  envSlug: string
+  actionName: string
+}
+
+export interface AppPageSlug {
+  app: string
+  page: string
+}
+
+export interface AppPageContext {
+  params: Array<AppPageContextKeyValue>
+}
+
+export interface AppPageContextKeyValue {
+  key: string
+  value: string
+}
+
+export interface ConfigSearchAction {
+  actionType: 'configSearch'
+  envSlug: string
+  appSlug: string
+  query: string
+}

package/src/types/utilityTypes.ts

@@ -0,0 +1 @@
+export type PartialRecord<TKey extends keyof any, T> = Partial<Record<TKey, T>>

package/src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plugin-svgr/client" />

package/src/ui/components/ActionCard.tsx

@@ -0,0 +1,30 @@
+import { AppIcon } from './AppIcon'
+import type { EhAppIndexed } from '@env-hopper/backend-core'
+import { Button } from '~/components/ui/button'
+
+interface ActionCardProps {
+  app: EhAppIndexed
+  actionName: string
+  onClick: () => void
+  className?: string
+}
+
+export function ActionCard({
+  app,
+  actionName,
+  onClick,
+  className,
+}: ActionCardProps) {
+  return (
+    <Button
+      variant="outline"
+      className={`h-16 justify-start p-3 hover:bg-accent/50 transition-colors border-border/30 ${className}`}
+      onClick={onClick}
+    >
+      <div className="flex items-center gap-2 text-left">
+        <AppIcon app={app} className="w-4 h-4 flex-shrink-0" />
+        <span className="text-xs font-medium leading-tight">{actionName}</span>
+      </div>
+    </Button>
+  )
+}