From 0737cef9b279118a47f04c937d4fc00f2210cf25 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Tue, 20 May 2025 14:50:45 +0000
Subject: [PATCH] fix(core): correct card view properties display (#12401)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Refactor**
  - Improved the layout of property display in the card view by consolidating all properties into a single container and streamlining the rendering structure.
  - Updated filtering to exclude properties of type "tags" from stack properties.
- **Style**
  - Simplified the visual structure for properties, removing unnecessary nested containers for a cleaner appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../explorer/docs-view/properties.tsx         | 97 +++++++++----------
 1 file changed, 44 insertions(+), 53 deletions(-)

diff --git a/packages/frontend/core/src/components/explorer/docs-view/properties.tsx b/packages/frontend/core/src/components/explorer/docs-view/properties.tsx
index 604a7560b..accf706f7 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/properties.tsx
+++ b/packages/frontend/core/src/components/explorer/docs-view/properties.tsx
@@ -36,14 +36,16 @@ const useProperties = (view: 'list' | 'card') => {
 
   const stackProperties = useMemo(
     () =>
-      explorerPropertyList.filter(
-        property =>
-          (property.systemProperty &&
-            property.systemProperty.showInDocList === 'stack') ||
-          (property.workspaceProperty &&
-            WorkspacePropertyTypes[property.workspaceProperty.type]
-              .showInDocList === 'stack')
-      ),
+      explorerPropertyList
+        .filter(
+          property =>
+            (property.systemProperty &&
+              property.systemProperty.showInDocList === 'stack') ||
+            (property.workspaceProperty &&
+              WorkspacePropertyTypes[property.workspaceProperty.type]
+                .showInDocList === 'stack')
+        )
+        .filter(p => p.systemProperty?.type !== 'tags'),
     [explorerPropertyList]
   );
 
@@ -191,50 +193,7 @@ export const CardViewProperties = ({ docId }: { docId: string }) => {
   }
 
   return (
-    <>
-      {/* stack properties */}
-      <div className={styles.stackContainer}>
-        <div className={styles.stackProperties}>
-          {stackProperties.map(({ systemProperty, workspaceProperty }) => {
-            const displayKeys = [
-              systemProperty ? `system:${systemProperty.type}` : null,
-              workspaceProperty ? `property:${workspaceProperty.id}` : null,
-            ];
-            if (
-              !displayKeys.some(key => key && displayProperties?.includes(key))
-            ) {
-              return null;
-            }
-            if (systemProperty) {
-              return (
-                <SystemPropertyRenderer
-                  doc={doc}
-                  config={SystemPropertyTypes[systemProperty.type]}
-                  key={systemProperty.type}
-                />
-              );
-            } else if (workspaceProperty) {
-              return (
-                <WorkspacePropertyRenderer
-                  key={workspaceProperty.id}
-                  doc={doc}
-                  property={workspaceProperty}
-                  config={WorkspacePropertyTypes[workspaceProperty.type]}
-                />
-              );
-            }
-            return null;
-          })}
-        </div>
-        {displayProperties?.includes('system:tags') ? (
-          <div className={styles.stackProperties}>
-            <SystemPropertyRenderer
-              doc={doc}
-              config={SystemPropertyTypes.tags}
-            />
-          </div>
-        ) : null}
-      </div>
+    <div className={styles.cardProperties}>
       {/* inline properties */}
       {inlineProperties.map(({ systemProperty, workspaceProperty }) => {
         const displayKeys = [
@@ -265,7 +224,39 @@ export const CardViewProperties = ({ docId }: { docId: string }) => {
         }
         return null;
       })}
-    </>
+      {/* stack properties */}
+      {stackProperties.map(({ systemProperty, workspaceProperty }) => {
+        const displayKeys = [
+          systemProperty ? `system:${systemProperty.type}` : null,
+          workspaceProperty ? `property:${workspaceProperty.id}` : null,
+        ];
+        if (!displayKeys.some(key => key && displayProperties?.includes(key))) {
+          return null;
+        }
+        if (systemProperty) {
+          return (
+            <SystemPropertyRenderer
+              doc={doc}
+              config={SystemPropertyTypes[systemProperty.type]}
+              key={systemProperty.type}
+            />
+          );
+        } else if (workspaceProperty) {
+          return (
+            <WorkspacePropertyRenderer
+              key={workspaceProperty.id}
+              doc={doc}
+              property={workspaceProperty}
+              config={WorkspacePropertyTypes[workspaceProperty.type]}
+            />
+          );
+        }
+        return null;
+      })}
+      {displayProperties?.includes('system:tags') ? (
+        <SystemPropertyRenderer doc={doc} config={SystemPropertyTypes.tags} />
+      ) : null}
+    </div>
   );
 };