[WIKI-523] refactor: assets item component (#7346)

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -79,7 +79,7 @@ export const PageDetailsHeader = observer(() => {
                   onChange={(value: string) => {
                     router.push(`/${workspaceSlug}/projects/${projectId}/pages/${value}`);
                   }}
-                  title={page?.name}
+                  title={getPageName(page?.name)}
                   icon={
                     <Breadcrumbs.Icon>
                       <SwitcherIcon logo_props={page.logo_props} LabelIcon={FileText} size={16} />

apps/web/ce/components/pages/navigation-pane/tab-panels/assets.tsx

@@ -5,6 +5,8 @@ import { TPageInstance } from "@/store/pages/base-page";
 
 export type TAdditionalPageNavigationPaneAssetItemProps = {
   asset: TEditorAsset;
+  assetSrc: string;
+  assetDownloadSrc: string;
   page: TPageInstance;
 };
 

apps/web/core/components/pages/navigation-pane/index.ts

@@ -5,7 +5,7 @@ export * from "./root";
 
 export const PAGE_NAVIGATION_PANE_WIDTH = 294;
 
-export const PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM = "sidebarTab";
+export const PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM = "paneTab";
 export const PAGE_NAVIGATION_PANE_VERSION_QUERY_PARAM = "version";
 
 export const PAGE_NAVIGATION_PANE_TAB_KEYS = ORDERED_PAGE_NAVIGATION_TABS_LIST.map((tab) => tab.key);

apps/web/core/components/pages/navigation-pane/tab-panels/assets.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Download } from "lucide-react";
@@ -29,37 +30,37 @@ const AssetItem = observer((props: AssetItemProps) => {
   // translation
   const { t } = useTranslation();
 
-  const getAssetSrc = (path: string) => {
+  const assetSrc: string = useMemo(() => {
-    if (!path || !workspaceSlug) return "";
+    if (!asset.src || !workspaceSlug) return "";
-    if (path.startsWith("http")) {
+    if (asset.src.startsWith("http")) {
-      return path;
+      return asset.src;
     } else {
       return (
         getEditorAssetSrc({
-          assetId: path,
+          assetId: asset.src,
           projectId: project_ids?.[0],
           workspaceSlug: workspaceSlug.toString(),
         }) ?? ""
       );
     }
-  };
+  }, [asset.src, project_ids, workspaceSlug]);
 
-  const getAssetDownloadSrc = (path: string) => {
+  const assetDownloadSrc: string = useMemo(() => {
-    if (!path || !workspaceSlug) return "";
+    if (!asset.src || !workspaceSlug) return "";
-    if (path.startsWith("http")) {
+    if (asset.src.startsWith("http")) {
-      return path;
+      return asset.src;
     } else {
       return (
         getEditorAssetDownloadSrc({
-          assetId: path,
+          assetId: asset.src,
           projectId: project_ids?.[0],
           workspaceSlug: workspaceSlug.toString(),
         }) ?? ""
       );
     }
-  };
+  }, [asset.src, project_ids, workspaceSlug]);
 
-  if ([CORE_EXTENSIONS.IMAGE, CORE_EXTENSIONS.CUSTOM_IMAGE].includes(asset.type))
+  if ([CORE_EXTENSIONS.IMAGE, CORE_EXTENSIONS.CUSTOM_IMAGE].includes(asset.type as CORE_EXTENSIONS))
     return (
       <a
         href={asset.href}
@@ -68,7 +69,7 @@ const AssetItem = observer((props: AssetItemProps) => {
         <div
           className="flex-shrink-0 w-11 h-12 rounded-l bg-cover bg-no-repeat bg-center"
           style={{
-            backgroundImage: `url('${getAssetSrc(asset.src)}')`,
+            backgroundImage: `url('${assetSrc}')`,
           }}
         />
         <div className="flex-1 space-y-0.5 truncate">
@@ -76,7 +77,7 @@ const AssetItem = observer((props: AssetItemProps) => {
           <div className="flex items-end justify-between gap-2">
             <p className="shrink-0 text-xs text-custom-text-200" />
             <a
-              href={getAssetDownloadSrc(asset.src)}
+              href={assetDownloadSrc}
               target="_blank"
               rel="noreferrer noopener"
               className="shrink-0 py-0.5 px-1 flex items-center gap-1 rounded text-custom-text-200 hover:text-custom-text-100 opacity-0 pointer-events-none group-hover/asset-item:opacity-100 group-hover/asset-item:pointer-events-auto transition-opacity"
@@ -89,7 +90,14 @@ const AssetItem = observer((props: AssetItemProps) => {
       </a>
     );
 
-  return <AdditionalPageNavigationPaneAssetItem asset={asset} page={page} />;
+  return (
+    <AdditionalPageNavigationPaneAssetItem
+      asset={asset}
+      assetSrc={assetSrc}
+      assetDownloadSrc={assetDownloadSrc}
+      page={page}
+    />
+  );
 });
 
 export const PageNavigationPaneAssetsTabPanel: React.FC<Props> = observer((props) => {
@@ -103,7 +111,9 @@ export const PageNavigationPaneAssetsTabPanel: React.FC<Props> = observer((props
 
   return (
     <div className="mt-5 space-y-4">
-      {assetsList?.map((asset) => <AssetItem key={asset.id} asset={asset} page={page} />)}
+      {assetsList?.map((asset) => (
+        <AssetItem key={asset.id} asset={asset} page={page} />
+      ))}
     </div>
   );
 });