From 8754d1b164a9796d711c678faea857ca0c16cd1c Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Tue, 24 Jun 2025 11:08:32 +0800
Subject: [PATCH] feat(core): limit visible doc inline stack tags (#12647)

![CleanShot 2025-05-29 at
18.06.32@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/09538910-0577-48cc-9532-53591d76f759.png)



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

## Summary by CodeRabbit

- **New Features**
- Tag lists now display a maximum of three tags, with an additional "+N
Tags" indicator if more tags are present.
- The "+N Tags" indicator label is localized based on your language
settings.

- **Style**
  - Improved spacing for the "+N Tags" indicator in tag lists.

- **Bug Fixes**
- Icons in certain property views are now only shown when available,
preventing empty icon placeholders.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../explorer/docs-view/stack-property.tsx          |  2 +-
 .../workspace-property-types/tags.css.ts           |  3 +++
 .../components/workspace-property-types/tags.tsx   | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/core/src/components/explorer/docs-view/stack-property.tsx b/packages/frontend/core/src/components/explorer/docs-view/stack-property.tsx
index 317ddbb977..0e7977c4f4 100644
--- a/packages/frontend/core/src/components/explorer/docs-view/stack-property.tsx
+++ b/packages/frontend/core/src/components/explorer/docs-view/stack-property.tsx
@@ -10,7 +10,7 @@ export const StackProperty = ({
   return (
     <div className={styles.stackItem}>
       <div className={styles.stackItemContent}>
-        <div className={styles.stackItemIcon}>{icon}</div>
+        {icon ? <div className={styles.stackItemIcon}>{icon}</div> : null}
         <div className={styles.stackItemLabel}>{children}</div>
       </div>
     </div>
diff --git a/packages/frontend/core/src/components/workspace-property-types/tags.css.ts b/packages/frontend/core/src/components/workspace-property-types/tags.css.ts
index 2ed733b4a0..7b71406f9f 100644
--- a/packages/frontend/core/src/components/workspace-property-types/tags.css.ts
+++ b/packages/frontend/core/src/components/workspace-property-types/tags.css.ts
@@ -27,3 +27,6 @@ export const groupHeaderLabel = style({
 export const filterValueMenu = style({
   top: 'calc(var(--radix-popper-anchor-height) - 18px) !important',
 });
+export const moreTagsLabel = style({
+  marginLeft: 4,
+});
diff --git a/packages/frontend/core/src/components/workspace-property-types/tags.tsx b/packages/frontend/core/src/components/workspace-property-types/tags.tsx
index 8e0d4b24ef..0a77e362a3 100644
--- a/packages/frontend/core/src/components/workspace-property-types/tags.tsx
+++ b/packages/frontend/core/src/components/workspace-property-types/tags.tsx
@@ -209,19 +209,31 @@ const TagIcon = ({ tag, size = 8 }: { tag: Tag; size?: number }) => {
     />
   );
 };
+
 export const TagsDocListProperty = ({ doc }: { doc: DocRecord }) => {
+  const max = 3;
+  const t = useI18n();
   const tagList = useService(TagService).tagList;
   const tags = useLiveData(tagList.tagsByPageId$(doc.id));
 
+  const showRest = tags.length > max + 1;
+  const visibleTags = tags.length === max + 1 ? max + 1 : max;
+
   return (
     <>
-      {tags.map(tag => {
+      {tags.slice(0, visibleTags).map(tag => {
         return (
           <StackProperty icon={<TagIcon tag={tag} />} key={tag.id}>
             <TagName tag={tag} />
           </StackProperty>
         );
       })}
+      {showRest ? (
+        <StackProperty icon={null}>
+          <span>+{tags.length - max}</span>
+          <span className={styles.moreTagsLabel}>{t['Tags']()}</span>
+        </StackProperty>
+      ) : null}
     </>
   );
 };