create-appraisejs 0.3.0 → 0.3.1-alpha.1

package/templates/blank/src/components/diagram/use-flow-diagram.ts

@@ -0,0 +1,383 @@
+'use client'
+
+import { addEdge, type Connection, type Edge, type Node, useEdgesState, useNodesState } from '@xyflow/react'
+import type { ReactFlowInstance } from '@xyflow/react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { flowEdgeMutationGuardRef } from './button-edge'
+import type { NodeFormData } from '@/constants/form-opts/diagram/node-form'
+import type { FlowDiagramProps } from './flow-diagram-types'
+import { EMPTY_FLOW_BLOCKS } from './flow-diagram-types'
+import type { InlineLocatorSaveResult } from '@/app/(base)/locators/create/create-locator-workspace-helpers'
+import { toast } from '@/hooks/use-toast'
+import {
+  buildNodeFormData,
+  createAddNodePromptNode,
+  createEditableNodeData,
+  determineNodeOrders,
+  generateInitialNodesAndEdges,
+  isAddNodePromptNode,
+  isEdgeWithinSameFlowBlock,
+  isValidDiagramConnection,
+  removeOrphanedEdges,
+} from './flow-diagram-helpers'
+import {
+  createOnConnectHandler,
+  filterBlockedEdgeChanges,
+  filterBlockedNodeChanges,
+  isValidFlowDiagramConnection,
+  syncFlowNodePresentationMetadata,
+} from './flow-diagram-connection-guards'
+import { flowDiagramHandlersRef, flowEdgeTypes, flowNodeTypes } from './flow-diagram-node-types'
+import { useFlowDiagramBlockGrouping } from './use-flow-diagram-block-grouping'
+import { useFlowDiagramSearch } from './use-flow-diagram-search'
+
+function mergeRecordsById<T extends { id: string }>(base: T[], overrides: T[]): T[] {
+  const byId = new Map<string, T>()
+  for (const item of base) {
+    byId.set(item.id, item)
+  }
+  for (const item of overrides) {
+    byId.set(item.id, item)
+  }
+  return [...byId.values()]
+}
+
+export function useFlowDiagram({
+  nodeOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  environments,
+  modules,
+  onNodeOrderChange,
+  defaultValueInput = false,
+  enableNodeSearch = false,
+  enableNodeGrouping = false,
+  flowBlocks = EMPTY_FLOW_BLOCKS,
+  layoutRefreshKey,
+  onFlowBlocksChange,
+}: FlowDiagramProps) {
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => generateInitialNodesAndEdges(nodeOrder, templateStepParams, defaultValueInput),
+    [defaultValueInput, nodeOrder, templateStepParams],
+  )
+
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)
+  const [showAddNodeDialog, setShowAddNodeDialog] = useState(false)
+  const [showEditNodeDialog, setShowEditNodeDialog] = useState(false)
+  const [editNodeId, setEditNodeId] = useState<string | null>(null)
+  const [editNodeData, setEditNodeData] = useState<NodeFormData | null>(null)
+  const [pendingAddSourceNodeId, setPendingAddSourceNodeId] = useState<string | null>(null)
+  const isConnectionInProgressRef = useRef(false)
+  const [pendingLocators, setPendingLocators] = useState<FlowDiagramProps['locators']>([])
+  const [pendingLocatorGroups, setPendingLocatorGroups] = useState<FlowDiagramProps['locatorGroups']>([])
+  const flowInstanceRef = useRef<ReactFlowInstance | null>(null)
+  const flowContainerRef = useRef<HTMLDivElement | null>(null)
+  const onNodeOrderChangeRef = useRef(onNodeOrderChange)
+  useEffect(() => {
+    onNodeOrderChangeRef.current = onNodeOrderChange
+  }, [onNodeOrderChange])
+  const edgeTypes = useMemo(() => flowEdgeTypes, [])
+  const nodeTypes = useMemo(() => flowNodeTypes, [])
+  const handleFlowInit = useCallback((instance: ReactFlowInstance) => {
+    flowInstanceRef.current = instance
+  }, [])
+
+  const mergedLocators = useMemo(() => mergeRecordsById(locators, pendingLocators), [locators, pendingLocators])
+  const mergedLocatorGroups = useMemo(
+    () => mergeRecordsById(locatorGroups, pendingLocatorGroups),
+    [locatorGroups, pendingLocatorGroups],
+  )
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- prune optimistic rows once server props include them
+    setPendingLocators(prev => prev.filter(p => !locators.some(l => l.id === p.id)))
+  }, [locators])
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- prune optimistic rows once server props include them
+    setPendingLocatorGroups(prev => prev.filter(p => !locatorGroups.some(g => g.id === p.id)))
+  }, [locatorGroups])
+
+  const handleEditNode = useCallback(
+    (nodeId: string) => {
+      const node = nodes.find(node => node.id === nodeId)
+      const editableNodeData = createEditableNodeData(node)
+      if (!editableNodeData) {
+        return
+      }
+
+      setEditNodeData(editableNodeData)
+      setEditNodeId(nodeId)
+      setShowEditNodeDialog(true)
+    },
+    [nodes],
+  )
+
+  const layoutRefreshNodeIds = useMemo(
+    () =>
+      nodes.reduce<string[]>((nodeIds, node) => {
+        if (!isAddNodePromptNode(node)) {
+          nodeIds.push(node.id)
+        }
+
+        return nodeIds
+      }, []),
+    [nodes],
+  )
+  const realNodeIds = useMemo(() => new Set(layoutRefreshNodeIds), [layoutRefreshNodeIds])
+  const blockTopologyMessage = 'Remove flow blocks before changing flow structure.'
+
+  const showTopologyBlockedToast = useCallback(() => {
+    toast({
+      title: 'Flow structure locked',
+      description: blockTopologyMessage,
+      variant: 'destructive',
+    })
+  }, [])
+
+  const search = useFlowDiagramSearch({
+    enableNodeSearch,
+    nodes,
+    onEditNode: handleEditNode,
+    flowInstanceRef,
+  })
+
+  const grouping = useFlowDiagramBlockGrouping({
+    enableNodeGrouping,
+    flowBlocks,
+    nodes,
+    edges,
+    realNodeIds,
+    onFlowBlocksChange,
+  })
+
+  const { flowBlockMembership } = grouping
+  const { searchHighlightedNodeId } = search
+
+  useEffect(() => {
+    flowDiagramHandlersRef.current.onEditNode = handleEditNode
+    flowDiagramHandlersRef.current.onOpenAddNode = sourceNodeId => {
+      setPendingAddSourceNodeId(sourceNodeId ?? null)
+      setShowAddNodeDialog(true)
+    }
+    flowEdgeMutationGuardRef.current = {
+      isEdgeDeleteBlocked: edge => isEdgeWithinSameFlowBlock(edge, flowBlockMembership),
+      isNodeDeleteBlocked: nodeId => flowBlockMembership.has(nodeId),
+      onBlocked: showTopologyBlockedToast,
+    }
+  }, [flowBlockMembership, handleEditNode, showTopologyBlockedToast])
+
+  const addNode = useCallback(
+    (formData: NodeFormData) => {
+      const realCount = nodes.filter(n => !isAddNodePromptNode(n)).length
+      const sourceNode = pendingAddSourceNodeId ? nodes.find(node => node.id === pendingAddSourceNodeId) : undefined
+      const newNodeId = crypto.randomUUID()
+      const newNode: Node = {
+        id: newNodeId,
+        data: buildNodeFormData(formData, templateSteps, templateStepParams, defaultValueInput, realCount === 0),
+        position: sourceNode ? { x: sourceNode.position.x + 500, y: sourceNode.position.y } : { x: 0, y: 0 },
+        type: 'optionsHeaderNode',
+      }
+      const connectedEdge: Edge | null =
+        sourceNode && pendingAddSourceNodeId
+          ? {
+              id: `${pendingAddSourceNodeId}-${newNodeId}`,
+              source: pendingAddSourceNodeId,
+              target: newNodeId,
+              type: 'buttonEdge',
+            }
+          : null
+      setNodes(nds => nds.filter(n => !isAddNodePromptNode(n)).concat(newNode))
+      if (connectedEdge && isValidDiagramConnection(edges, connectedEdge)) {
+        setEdges(eds => addEdge(connectedEdge, eds))
+      }
+      setShowAddNodeDialog(false)
+      setPendingAddSourceNodeId(null)
+    },
+    [setEdges, setNodes, nodes, edges, pendingAddSourceNodeId, templateSteps, templateStepParams, defaultValueInput],
+  )
+
+  const handleEditNodeSubmit = useCallback(
+    (formData: NodeFormData) => {
+      if (!editNodeId) return
+      const nextNodeData = buildNodeFormData(formData, templateSteps, templateStepParams, defaultValueInput, false)
+
+      setNodes(nds =>
+        nds.map(node =>
+          node.id === editNodeId
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  ...nextNodeData,
+                },
+              }
+            : node,
+        ),
+      )
+      setShowEditNodeDialog(false)
+    },
+    [editNodeId, setNodes, templateSteps, templateStepParams, defaultValueInput],
+  )
+
+  useEffect(() => {
+    onNodeOrderChangeRef.current(determineNodeOrders(nodes, edges))
+  }, [nodes, edges])
+
+  useEffect(() => {
+    const hasRealNode = nodes.some(n => !isAddNodePromptNode(n))
+    if (hasRealNode) {
+      return
+    }
+    const hasPrompt = nodes.some(n => isAddNodePromptNode(n))
+    if (hasPrompt) {
+      return
+    }
+    setNodes([createAddNodePromptNode()])
+  }, [nodes, setNodes])
+
+  useEffect(() => {
+    const nextEdges = removeOrphanedEdges(nodes, edges)
+
+    if (nextEdges.length !== edges.length) {
+      setEdges(nextEdges)
+    }
+  }, [nodes, edges, setEdges])
+
+  const syncNodePresentationMetadata = useCallback(() => {
+    setNodes(currentNodes =>
+      syncFlowNodePresentationMetadata(
+        currentNodes,
+        edges,
+        flowBlockMembership,
+        searchHighlightedNodeId,
+        isConnectionInProgressRef.current,
+      ),
+    )
+  }, [edges, flowBlockMembership, searchHighlightedNodeId, setNodes])
+
+  useEffect(() => {
+    syncNodePresentationMetadata()
+  }, [nodes, edges, flowBlockMembership, searchHighlightedNodeId, syncNodePresentationMetadata])
+
+  const isValidConnection = useCallback(
+    (connection: Connection | Edge) => isValidFlowDiagramConnection(connection, edges, flowBlockMembership),
+    [edges, flowBlockMembership],
+  )
+
+  const onConnect = useMemo(
+    () => createOnConnectHandler(edges, flowBlockMembership, setEdges, showTopologyBlockedToast),
+    [edges, flowBlockMembership, setEdges, showTopologyBlockedToast],
+  )
+
+  const handleEdgesChange = useCallback(
+    (changes: Parameters<typeof onEdgesChange>[0]) => {
+      const { blockedDeleteIds, allowedChanges } = filterBlockedEdgeChanges(changes, edges, flowBlockMembership)
+
+      if (blockedDeleteIds.size > 0) {
+        showTopologyBlockedToast()
+      }
+
+      onEdgesChange(allowedChanges)
+    },
+    [edges, flowBlockMembership, onEdgesChange, showTopologyBlockedToast],
+  )
+
+  const handleNodesChange = useCallback(
+    (changes: Parameters<typeof onNodesChange>[0]) => {
+      const { blockedDeleteIds, allowedChanges } = filterBlockedNodeChanges(changes, flowBlockMembership)
+
+      if (blockedDeleteIds.size > 0) {
+        showTopologyBlockedToast()
+      }
+
+      onNodesChange(allowedChanges)
+    },
+    [flowBlockMembership, onNodesChange, showTopologyBlockedToast],
+  )
+
+  const handleConnectStart = useCallback(() => {
+    isConnectionInProgressRef.current = true
+    syncNodePresentationMetadata()
+  }, [syncNodePresentationMetadata])
+
+  const handleConnectEnd = useCallback(() => {
+    isConnectionInProgressRef.current = false
+    syncNodePresentationMetadata()
+  }, [syncNodePresentationMetadata])
+
+  const memoizedTemplateSteps = useMemo(() => templateSteps, [templateSteps])
+  const memoizedTemplateStepParams = useMemo(() => templateStepParams, [templateStepParams])
+
+  const handleLocatorCreated = useCallback((result: InlineLocatorSaveResult) => {
+    setPendingLocatorGroups(current => {
+      const nextGroup = {
+        id: result.locatorGroupId,
+        name: result.locatorGroupName,
+        route: result.route,
+        moduleId: result.moduleId,
+      }
+
+      return current.some(group => group.id === result.locatorGroupId)
+        ? current.map(group => (group.id === result.locatorGroupId ? { ...group, ...nextGroup } : group))
+        : [...current, nextGroup]
+    })
+
+    setPendingLocators(current => {
+      const nextLocator = {
+        id: result.locatorId,
+        name: result.locatorName,
+        locatorGroupId: result.locatorGroupId,
+      }
+
+      return current.some(locator => locator.id === result.locatorId)
+        ? current.map(locator => (locator.id === result.locatorId ? { ...locator, ...nextLocator } : locator))
+        : [...current, nextLocator]
+    })
+  }, [])
+
+  const openAddNodeDialog = useCallback(() => {
+    setPendingAddSourceNodeId(null)
+    setShowAddNodeDialog(true)
+  }, [])
+
+  return {
+    enableNodeSearch,
+    enableNodeGrouping,
+    defaultValueInput,
+    environments,
+    modules,
+    layoutRefreshKey,
+    search,
+    grouping,
+    flowContainerRef,
+    nodes,
+    handleNodesChange,
+    edges,
+    handleEdgesChange,
+    onConnect,
+    handleConnectStart,
+    handleConnectEnd,
+    edgeTypes,
+    nodeTypes,
+    handleFlowInit,
+    isValidConnection,
+    layoutRefreshNodeIds,
+    openAddNodeDialog,
+    addNode,
+    handleEditNodeSubmit,
+    showAddNodeDialog,
+    setShowAddNodeDialog,
+    showEditNodeDialog,
+    setShowEditNodeDialog,
+    editNodeData,
+    memoizedTemplateSteps,
+    memoizedTemplateStepParams,
+    mergedLocators,
+    mergedLocatorGroups,
+    handleLocatorCreated,
+  }
+}

package/templates/blank/src/components/loading-skeleton/data-table/data-table-skeleton.tsx

@@ -17,7 +17,7 @@ const DataTableSkeleton = () => {
       </div>
       <div className="mb-6 mt-4 flex justify-between">
         <div className="flex items-center gap-2">
-          <Search className="mr-2 h-5 w-5" />
+          <Search className="mr-2 size-5" />
           <TextInputSkeleton />
         </div>
         <ButtonSkeleton />

package/templates/blank/src/components/loading-skeleton/form/icon-button-skeleton.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import React from 'react'
 
 const IconButtonSkeleton = () => {
-  return <Skeleton className="h-8 w-8 rounded-sm" />
+  return <Skeleton className="size-8 rounded-sm" />
 }
 
 export default IconButtonSkeleton

package/templates/blank/src/components/logo.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 const Logo = () => {
   return (
     <div className="m-2 flex items-center gap-1">
-      <Image src="/logo.svg" alt="AppraiseJS" width={32} height={32} priority className="h-8 w-8" />
+      <Image src="/logo.svg" alt="AppraiseJS" width={32} height={32} priority className="size-8" />
       <span className="flex items-baseline gap-1">
         <span className="text-foreground/90 text-[0.95rem] font-medium uppercase tracking-[0.12em]">Appraise</span>
         <span className="text-[0.95rem] font-normal uppercase tracking-[0.12em] text-primary">JS</span>

package/templates/blank/src/components/navigation/command-badge.tsx

@@ -27,7 +27,7 @@ export function CommandBadge({ label, onClose, className }: CommandBadgeProps) {
         className="hover:bg-secondary-foreground/20 ml-0.5 rounded-sm focus:outline-none focus:ring-1 focus:ring-ring"
         aria-label={`Clear ${label}`}
       >
-        <X className="h-3 w-3" />
+        <X className="size-3" />
       </button>
     </Badge>
   )

package/templates/blank/src/components/navigation/command-chain-input.tsx

@@ -6,19 +6,15 @@ import { Search } from 'lucide-react'
 import { CommandBadge } from './command-badge'
 import { cn } from '@/lib/utils'
 
-export interface CommandChainInputProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+interface CommandChainInputProps extends React.ComponentProps<typeof CommandPrimitive.Input> {
   badge?: {
     label: string
     onClose: () => void
   }
 }
 
-export const CommandChainInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  CommandChainInputProps
->(({ badge, className, onKeyDown, ...props }, ref) => {
+export function CommandChainInput({ badge, className, onKeyDown, ...props }: CommandChainInputProps) {
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    // If backspace is pressed and input is empty, clear the badge
     if (e.key === 'Backspace' && !(e.target as HTMLInputElement).value && badge) {
       e.preventDefault()
       badge.onClose()
@@ -28,15 +24,14 @@ export const CommandChainInput = React.forwardRef<
   }
 
   return (
-    <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-      <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <div className="flex items-center border-b px-3" data-cmdk-input-wrapper="">
+      <Search className="mr-2 size-4 shrink-0 opacity-50" />
       {badge && (
         <div className="mr-2 flex-shrink-0">
           <CommandBadge label={badge.label} onClose={badge.onClose} />
         </div>
       )}
       <CommandPrimitive.Input
-        ref={ref}
         className={cn(
           'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
           className,
@@ -46,6 +41,6 @@ export const CommandChainInput = React.forwardRef<
       />
     </div>
   )
-})
+}
 
 CommandChainInput.displayName = 'CommandChainInput'

package/templates/blank/src/components/navigation/entity-search-command.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { useEffect, useState, useMemo } from 'react'
+import { useEffect, useMemo, useReducer } from 'react'
 import { CommandGroup, CommandItem } from '../ui/command'
 import type { ActionResponse, ActionResponseData } from '@/types/form/actionHandler'
 
@@ -15,6 +15,23 @@ export interface EntitySearchCommandProps<T extends { id: string }> {
   onSelect?: (entity: T) => void
 }
 
+type LoadState<T> = { status: 'loading' } | { status: 'error'; message: string } | { status: 'ready'; entities: T[] }
+
+type LoadAction<T> = { type: 'reset' } | { type: 'ready'; entities: T[] } | { type: 'error'; message: string }
+
+function loadReducer<T>(state: LoadState<T>, action: LoadAction<T>): LoadState<T> {
+  switch (action.type) {
+    case 'reset':
+      return { status: 'loading' }
+    case 'ready':
+      return { status: 'ready', entities: action.entities }
+    case 'error':
+      return { status: 'error', message: action.message }
+    default:
+      return state
+  }
+}
+
 export function EntitySearchCommand<T extends { id: string }>({
   searchQuery,
   entityName,
@@ -24,35 +41,31 @@ export function EntitySearchCommand<T extends { id: string }>({
   icon,
   onSelect,
 }: EntitySearchCommandProps<T>) {
-  const [entities, setEntities] = useState<T[]>([])
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
+  const [state, dispatch] = useReducer(loadReducer<T>, { status: 'loading' } satisfies LoadState<T>)
 
   useEffect(() => {
     let isMounted = true
 
-    const fetchEntities = async () => {
-      setIsLoading(true)
-      setError(null)
+    const run = async () => {
+      dispatch({ type: 'reset' })
       try {
         const result = await fetchAction()
-        if (isMounted) {
-          if (result.status === 200) {
-            setEntities(getEntities(result.data))
-          } else {
-            setError(result.error || 'Failed to fetch entities')
-          }
-          setIsLoading(false)
+        if (!isMounted) return
+        if (result.status === 200) {
+          dispatch({ type: 'ready', entities: getEntities(result.data) })
+        } else {
+          dispatch({ type: 'error', message: result.error || 'Failed to fetch entities' })
         }
       } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : 'An error occurred')
-          setIsLoading(false)
-        }
+        if (!isMounted) return
+        dispatch({
+          type: 'error',
+          message: err instanceof Error ? err.message : 'An error occurred',
+        })
       }
     }
 
-    fetchEntities()
+    void run()
 
     return () => {
       isMounted = false
@@ -60,6 +73,10 @@ export function EntitySearchCommand<T extends { id: string }>({
   }, [fetchAction, getEntities])
 
   const filteredEntities = useMemo(() => {
+    if (state.status !== 'ready') {
+      return []
+    }
+    const entities = state.entities
     if (!searchQuery.trim()) {
       return entities
     }
@@ -72,21 +89,21 @@ export function EntitySearchCommand<T extends { id: string }>({
       }
       return false
     })
-  }, [entities, searchQuery, searchKey])
+  }, [state, searchQuery, searchKey])
 
-  if (isLoading) {
+  if (state.status === 'loading') {
     return (
       <CommandGroup heading={`Searching ${entityName}...`}>
-        <CommandItem disabled>Loading...</CommandItem>
+        <CommandItem disabled>Loading…</CommandItem>
       </CommandGroup>
     )
   }
 
-  if (error) {
+  if (state.status === 'error') {
     return (
       <CommandGroup heading="Error">
         <CommandItem disabled className="text-destructive">
-          {error}
+          {state.message}
         </CommandItem>
       </CommandGroup>
     )

package/templates/blank/src/components/navigation/nav-command-search.tsx

@@ -69,7 +69,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTestSuitesAction}
           getEntities={getTestSuiteRows}
           searchKey="name"
-          icon={<TestTubes className="h-4 w-4" />}
+          icon={<TestTubes className="size-4" />}
           onSelect={testSuite => onSelectRoute(`/test-suites/modify/${testSuite.id}`)}
         />
       )
@@ -81,7 +81,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTestCasesAction}
           getEntities={getTestCaseRows}
           searchKey="title"
-          icon={<TestTubeDiagonal className="h-4 w-4" />}
+          icon={<TestTubeDiagonal className="size-4" />}
           onSelect={testCase => onSelectRoute(`/test-cases/modify/${testCase.id}`)}
         />
       )
@@ -93,7 +93,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTemplateStepsAction}
           getEntities={getTemplateStepRows}
           searchKey="name"
-          icon={<LayoutTemplate className="h-4 w-4" />}
+          icon={<LayoutTemplate className="size-4" />}
           onSelect={templateStep => onSelectRoute(`/template-steps/modify/${templateStep.id}`)}
         />
       )
@@ -105,7 +105,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTestRunsAction}
           getEntities={getTestRunRows}
           searchKey="name"
-          icon={<ListChecks className="h-4 w-4" />}
+          icon={<ListChecks className="size-4" />}
           onSelect={testRun => onSelectRoute(`/test-runs/${testRun.id}`)}
         />
       )
@@ -117,7 +117,7 @@ export function NavCommandSearch({ commandMode, searchQuery, onSelectRoute }: Na
           fetchAction={getAllTemplateTestCasesAction}
           getEntities={getTemplateTestCaseRows}
           searchKey="name"
-          icon={<Blocks className="h-4 w-4" />}
+          icon={<Blocks className="size-4" />}
           onSelect={templateTestCase => onSelectRoute(`/template-test-cases/modify/${templateTestCase.id}`)}
         />
       )

package/templates/blank/src/components/navigation/nav-command.tsx

@@ -24,12 +24,12 @@ export type NavCommandProps = {
 }
 
 export default function NavCommand({ className }: NavCommandProps) {
-  const router = useRouter()
+  const { push } = useRouter()
   const { open, setOpen, commandMode, searchQuery, setSearchQuery, isMac, clearSearchMode, selectSearchMode } =
     useNavCommand()
 
   const handleNavigate = (href: string) => {
-    router.push(href)
+    push(href)
     setOpen(false)
   }
 
@@ -43,11 +43,11 @@ export default function NavCommand({ className }: NavCommandProps) {
       >
         <span>Open Command Palette</span>
         <div className="flex items-center gap-1 text-xs text-muted-foreground">
-          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">
-            {isMac ? <Command className="h-2 w-2 text-gray-400" /> : 'Ctrl'}
+          <kbd className="rounded-md bg-muted px-1 text-xs text-zinc-400">
+            {isMac ? <Command className="size-2 text-zinc-400" /> : 'Ctrl'}
           </kbd>
-          <Plus className="h-2 w-2 text-gray-400" />
-          <kbd className="rounded-md bg-muted px-1 text-xs text-gray-400">K</kbd>
+          <Plus className="size-2 text-zinc-400" />
+          <kbd className="rounded-md bg-muted px-1 text-xs text-zinc-400">K</kbd>
         </div>
       </Button>
       <CommandDialog open={open} onOpenChange={setOpen} shouldFilter={!commandMode}>
@@ -71,7 +71,7 @@ export default function NavCommand({ className }: NavCommandProps) {
                     const Icon = item.icon
                     return (
                       <CommandItem key={item.href} value={item.label} onSelect={() => handleNavigate(item.href)}>
-                        <Icon className="h-4 w-4" />
+                        <Icon className="size-4" />
                         {item.label}
                       </CommandItem>
                     )
@@ -83,7 +83,7 @@ export default function NavCommand({ className }: NavCommandProps) {
                   const Icon = item.icon
                   return (
                     <CommandItem key={item.mode} value={item.label} onSelect={() => selectSearchMode(item.mode)}>
-                      <Icon className="h-4 w-4" />
+                      <Icon className="size-4" />
                       {item.label}
                     </CommandItem>
                   )