feat: use codezero icons in actions

Author: mvriu5

package-lock.json

@@ -24,10 +24,10 @@
         "@c15t/nextjs": "^2.1.0",
         "@c15t/react": "^2.1.0",
         "@c15t/scripts": "^2.1.0",
-        "@code0-tech/pictor": "^0.12.0",
+        "@code0-tech/pictor": "^0.13.0",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@mvriu5/payload-ai": "^1.3.2",
-        "@mvriu5/payload-icon-picker": "^1.0.2",
+        "@mvriu5/payload-icon-picker": "^1.1.1",
         "@number-flow/react": "^0.6.1",
         "@openrouter/ai-sdk-provider": "^2.10.0",
         "@payloadcms/db-postgres": "3.86.0",

package.json

@@ -1,4 +1,5 @@
 import { ActionTriggerView } from "@/components/ActionTriggerView"
+import { ActionIcon } from "@/components/ActionIcon"
 import { ActionCard } from "@/components/cards/ActionCard"
 import { Aurora } from "@/components/ui/Aurora"
 import { LandingContainer } from "@/components/ui/LandingContainer"
@@ -8,7 +9,6 @@ import { extractFlowTypesFromJson, extractFunctionDefinitionsFromJson, fetchMedi
 import { getActionBySlug, getLandingPage } from "@/lib/cms"
 import { findPageBlock } from "@/lib/pageBlocks"
 import { createMetadata } from "@/lib/siteConfig"
-import { getIcon } from "@/components/IconRenderer"
 import type { Media } from "@/payload-types"
 import { IconArrowLeft } from "@tabler/icons-react"
 import type { Metadata } from "next"
@@ -26,11 +26,11 @@ export default async function ActionDetailPage({ params }: { params: LocaleSlugP
     const extractedFunctionDefinitions = extractFunctionDefinitionsFromJson(moduleJson)
     const flowTypeItems = extractedFlowTypes.map((item) => ({
         item,
-        icon: getIcon(item.displayIcon, 32),
+        icon: item.displayIcon,
     }))
     const functionDefinitionItems = extractedFunctionDefinitions.map((item) => ({
         item,
-        icon: getIcon(item.displayIcon ?? "function", 32),
+        icon: item.displayIcon ?? "tabler:IconFunction",
     }))
     const references = (action.references ?? []).filter((reference): reference is Exclude<typeof reference, number> => typeof reference !== "number")
     const tags = (action.tags ?? []).filter((tag): tag is string => Boolean(tag))
@@ -58,7 +58,7 @@ export default async function ActionDetailPage({ params }: { params: LocaleSlugP
                                 <div className="flex flex-col gap-6 sm:flex-row sm:items-start">
                                     {action.icon && (
                                         <div className="flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-light text-white">
-                                            {getIcon(action.icon, 40)}
+                                            <ActionIcon icon={action.icon} size={40} />
                                         </div>
                                     )}
 

src/app/(landing)/[locale]/actions/[slug]/page.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { Icon } from "@code0-tech/pictor"
+
+interface ActionIconProps {
+    icon: string | null | undefined
+    size?: number
+}
+
+export function ActionIcon({ icon, size = 24 }: ActionIconProps) {
+    if (!icon) return null
+
+    return <Icon icon={icon} size={size} />
+}

src/components/ActionIcon.tsx

@@ -2,13 +2,14 @@
 
 import { BaseAccordionItem } from "@/components/ui/Accordion"
 import type { ExtractedFlowType, ExtractedFunctionDefinition } from "@/lib/actionExtraction"
-import { type ReactNode, useCallback, useMemo, useState } from "react"
+import { Icon } from "@code0-tech/pictor"
+import { useCallback, useMemo, useState } from "react"
 import { Card } from "./ui/Card"
 
 interface ActionTriggerCardProps {
     type: "flowType" | "functionDefinition"
     item: ExtractedFlowType | ExtractedFunctionDefinition
-    icon: ReactNode
+    icon?: string
 }
 
 export function ActionTriggerCard({ type, item, icon }: ActionTriggerCardProps) {
@@ -38,7 +39,9 @@ export function ActionTriggerCard({ type, item, icon }: ActionTriggerCardProps)
             <div className="relative z-10 flex h-full flex-col gap-2">
                 <div className="flex items-start justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-2">
-                        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-white/5 bg-light text-brand">{icon}</div>
+                        <div className="flex size-10 shrink-0 items-center justify-center rounded-lg border border-white/5 bg-light text-brand">
+                            <Icon icon={icon ?? "tabler:IconFunction"} size={24} />
+                        </div>
                         <div className="min-w-0">
                             <p className="text-xs tracking-wide text-tertiary">{label}</p>
                             <h3 className="truncate tracking-wide text-white">{item.name || item.identifier}</h3>

src/components/ActionTriggerCard.tsx

@@ -1,14 +1,14 @@
 "use client"
 
-import { type ReactNode, useState } from "react"
+import { useState } from "react"
 import { ActionTriggerCard } from "@/components/ActionTriggerCard"
 import { Switch, type SwitchOption } from "@/components/ui/Switch"
 import type { ExtractedFlowType, ExtractedFunctionDefinition } from "@/lib/actionExtraction"
 
 interface ActionTriggerViewProps {
     locale: string
-    flowTypes: Array<{ item: ExtractedFlowType; icon: ReactNode }>
-    functionDefinitions: Array<{ item: ExtractedFunctionDefinition; icon: ReactNode }>
+    flowTypes: Array<{ item: ExtractedFlowType; icon?: string }>
+    functionDefinitions: Array<{ item: ExtractedFunctionDefinition; icon?: string }>
     emptyLabels: {
         flowTypes: string
         functionDefinitions: string
@@ -21,7 +21,7 @@ type ViewMode = "both" | "flowTypes" | "functionDefinitions"
 interface DisplayItem {
     type: "flowType" | "functionDefinition"
     item: ExtractedFlowType | ExtractedFunctionDefinition
-    icon: ReactNode
+    icon?: string
 }
 
 export function ActionTriggerView({ locale, flowTypes, functionDefinitions, emptyLabels }: ActionTriggerViewProps) {

src/components/ActionTriggerView.tsx

@@ -1,4 +1,6 @@
-import { getIcon } from "@/components/IconRenderer"
+"use client"
+
+import { ActionIcon } from "@/components/ActionIcon"
 import type { ActionItem } from "@/lib/cms"
 import type { AppLocale } from "@/lib/i18n"
 import Link from "next/link"
@@ -11,7 +13,9 @@ export function ActionCard({ action, locale }: { action: ActionItem; locale: App
                 <div className="relative z-10 flex flex-col gap-4">
                     <div className="flex items-start gap-2">
                         {action.icon && (
-                            <div className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/5 bg-light text-white">{getIcon(action.icon, 28)}</div>
+                            <div className="flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-2xl border border-white/5 bg-light text-white">
+                                <ActionIcon icon={action.icon} size={28} />
+                            </div>
                         )}
 
                         <div className="min-w-0 flex flex-col justify-center mt-1">