fix: category slug reactive closes #294

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/layout/header/internal/Activity.tsx

@@ -109,6 +109,7 @@ const ActivityIcon = memo(() => {
     }
     setActivityProcessInfo({
       name: data.processInfo?.name || data.processName,
+      iconUrl: data.processInfo?.iconUrl,
       iconBase64: data.processInfo?.iconBase64,
       description: data.processInfo?.description,
     })
@@ -203,7 +204,11 @@ const TriggerComponent = memo<{
   const isBuiltIn = !!appIcon[processName]
 
   const src =
-    !isBuiltIn && icon ? icon : `${CND_DOMAIN}/apps/${appIcon[processName]}.png`
+    !isBuiltIn && icon
+      ? icon
+      : isBuiltIn
+        ? `${CND_DOMAIN}/apps/${appIcon[processName]}.png`
+        : ''
 
   const className = clsx('pointer-events-none select-none', {
     'rounded-md': !isBuiltIn,
@@ -214,7 +219,7 @@ const TriggerComponent = memo<{
     <Image
       width={32}
       height={32}
-      src={error ? ErrorFallback : src}
+      src={error ? ErrorFallback : src || ErrorFallback}
       alt={processName}
       priority
       fetchPriority="low"

src/components/modules/dashboard/home/Shiju.tsx

@@ -21,7 +21,7 @@ export const ShiJu = () => {
   if (!origin) return null
   return (
     <FloatPopover triggerElement={<span>{data?.shiju}</span>}>
-      <div className="text-center">
+      <div className="max-w-[800px] text-center">
         <h3 className="sticky top-0 py-2 text-2xl font-medium">
           {origin.title}
         </h3>

src/components/modules/dashboard/post-editing/SlugInput.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import type { CategoryModel } from '@mx-space/api-client'
 
 import { adminQueries } from '~/queries/definition'
 
@@ -22,14 +23,24 @@ export const SlugInput = () => {
       setCategoryId(category.id)
     }
   }, [category, categoryId, setCategoryId])
+  const categoryIdMap: Record<string, CategoryModel> = useMemo(() => {
+    if (!categories) return {}
+    return categories.data.reduce(
+      (acc, category) => ({
+        ...acc,
+        [category.id]: category,
+      }),
+      {},
+    )
+  }, [categories])
 
   const isLoading = !category
   return (
     <>
-      {isLoading ? (
-        <div className="h-2 w-[120px] animate-pulse bg-white " />
+      {isLoading || !categoryId ? (
+        <div className="h-2 w-[120px] animate-pulse bg-white" />
       ) : (
-        <label className="text-base-content">{`${webUrl}/posts/${category?.slug}/`}</label>
+        <label className="text-base-content">{`${webUrl}/posts/${categoryIdMap?.[categoryId]?.slug}/`}</label>
       )}
 
       <div className="relative ml-1 inline-flex min-w-[2rem] items-center overflow-hidden rounded-md bg-white py-1 dark:bg-zinc-900 [&_*]:leading-4">