feat: update figma category card icons

src/pages/Home/index.tsx

@@ -13,36 +13,35 @@ import { SectionHeader } from "../../components/SectionHeader";
 import { MessageBubble } from "../../components/messageStream/MessageBubble";
 import { langQuery, useI18n } from "../../i18n";
 import { sourceLanguageQuery } from "../../i18nLanguages";
-import { categoryCardLines } from "../../utils/categoryDisplay";
+import { cleanCategoryDisplayName } from "../../utils/categoryDisplay";
 import {
   postToResource,
   type PostBackedResource,
 } from "../../utils/postResourceAdapter";
 import type { Post } from "../../types/post";
 
-const FIGMA_CATEGORY_LABELS: Record<string, string> = {
-  "project-ppt": "项目资料",
-  "daily-class": "每日课堂",
-  "official-announcement": "官方公告",
-  "academy-materials": "学堂教育",
-  "global-evangelism": "全球布道",
-  "daily-poster": "每日海报",
-  "community-tweets": "社群动向",
-  "video-hub": "视频汇总",
-  "subsidy-policy": "补贴政策",
-};
-
-const FIGMA_CATEGORY_ORDER = Object.keys(FIGMA_CATEGORY_LABELS);
+const FIGMA_CATEGORY_ORDER = [
+  "project-ppt",
+  "daily-class",
+  "official-announcement",
+  "academy-materials",
+  "global-evangelism",
+  "daily-poster",
+  "community-tweets",
+  "video-hub",
+  "subsidy-policy",
+  "how-to",
+  "official-assets",
+  "media-coverage",
+  "academy-video",
+  "general",
+];
 
 function figmaCategoryRank(category: Category): number {
   const index = FIGMA_CATEGORY_ORDER.indexOf(category.slug);
   return index === -1 ? FIGMA_CATEGORY_ORDER.length : index;
 }
 
-function figmaCategoryName(category: Category): string {
-  return FIGMA_CATEGORY_LABELS[category.slug] ?? category.name;
-}
-
 export function Home() {
   const { t, lang } = useI18n();
   const [cats, setCats] = useState<Category[]>([]);
@@ -199,7 +198,7 @@ export function Home() {
                   <Link
                     key={c.id}
                     to={`/category/${c.slug}`}
-                    className="group flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl bg-[#1D1E23] px-4 py-3 text-center transition hover:bg-[#252630] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                    className="group flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center transition hover:bg-[#252630] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
                   >
                     <CategoryIcon
                       iconKey={c.iconKey}
@@ -207,7 +206,7 @@ export function Home() {
                       className="h-9 w-9 shrink-0 text-ark-gold"
                     />
                     <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
-                      {figmaCategoryName(c)}
+                      {cleanCategoryDisplayName(c.name)}
                     </div>
                   </Link>
                 ))}
@@ -247,32 +246,22 @@ export function Home() {
         </div>
 
         <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
-          {figmaOrderedCategories.map((c) => {
-            const { line1, line2 } = categoryCardLines(figmaCategoryName(c));
-            return (
-              <Link
-                key={c.id}
-                to={`/category/${c.slug}`}
-                className="group flex min-h-[111px] min-w-0 flex-col items-center justify-center gap-3 rounded-xl border border-ark-line bg-ark-panel px-2.5 py-4 text-center transition hover:border-ark-gold/55 hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] md:min-h-24 md:flex-row md:justify-start md:gap-4 md:px-5 md:text-left"
-              >
-                <CategoryIcon
-                  iconKey={c.iconKey}
-                  categorySlug={c.slug}
-                  className="h-9 w-9 shrink-0 text-ark-gold md:h-9 md:w-9"
-                />
-                <div className="min-w-0">
-                  <div className="text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
-                    {line1}
-                  </div>
-                  {line2 ? (
-                    <div className="mt-0.5 text-[15px] font-bold leading-snug text-white line-clamp-2 md:text-sm">
-                      {line2}
-                    </div>
-                  ) : null}
-                </div>
-              </Link>
-            );
-          })}
+          {figmaOrderedCategories.map((c) => (
+            <Link
+              key={c.id}
+              to={`/category/${c.slug}`}
+              className="group flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center transition hover:border-ark-gold/55 hover:bg-[#252630] hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+            >
+              <CategoryIcon
+                iconKey={c.iconKey}
+                categorySlug={c.slug}
+                className="h-9 w-9 shrink-0 text-ark-gold"
+              />
+              <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
+                {cleanCategoryDisplayName(c.name)}
+              </div>
+            </Link>
+          ))}
         </div>
       </section>