From f2d0ac74e9e61211bd2914797bce9cef90712316 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 23 Jun 2026 12:22:21 +0800
Subject: [PATCH] feat(web): refine snippet info layout

---
 .../components/snippet-collapsed-preview.tsx  | 14 ++-------
 .../components/snippet-placeholder-icon.tsx   | 30 +++++++++++++++++++
 .../snippets/components/snippet-sidebar.tsx   | 15 ++++++----
 3 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 web/app/components/snippets/components/snippet-placeholder-icon.tsx

diff --git a/web/app/components/snippets/components/snippet-collapsed-preview.tsx b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
index 69fa79ca087..731af1c744d 100644
--- a/web/app/components/snippets/components/snippet-collapsed-preview.tsx
+++ b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import { SnippetPlaceholderIcon } from './snippet-placeholder-icon'
+
 export function SnippetCollapsedPreview({
   inputFieldCount,
 }: {
@@ -10,17 +12,7 @@ export function SnippetCollapsedPreview({
       className="flex min-h-0 grow flex-col items-center px-2 pt-4"
       aria-label="Snippet collapsed preview"
     >
-      <div
-        className="flex size-10 items-center justify-center rounded-[10px] border border-divider-subtle bg-background-default-subtle text-text-tertiary shadow-xs"
-        aria-hidden="true"
-      >
-        <span className="relative block size-8">
-          <span className="absolute top-1/2 left-1/2 h-4 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-util-colors-blue-blue-500" />
-          <span className="absolute top-0.5 left-0.5 size-2.5 rounded-xs bg-util-colors-blue-blue-300 shadow-xs" />
-          <span className="absolute top-1/2 right-0.5 size-2.5 -translate-y-1/2 rounded-xs bg-util-colors-blue-blue-600 shadow-xs" />
-          <span className="absolute bottom-0.5 left-0.5 size-2.5 rounded-xs bg-util-colors-indigo-indigo-400 shadow-xs" />
-        </span>
-      </div>
+      <SnippetPlaceholderIcon />
       <div className="my-4 h-px w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
       <div
         className="relative flex size-8 items-center justify-center rounded-lg border border-divider-subtle bg-background-default-subtle text-text-accent shadow-xs"
diff --git a/web/app/components/snippets/components/snippet-placeholder-icon.tsx b/web/app/components/snippets/components/snippet-placeholder-icon.tsx
new file mode 100644
index 00000000000..982ba688e80
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-placeholder-icon.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { cn } from '@langgenius/dify-ui/cn'
+
+type SnippetPlaceholderIconProps = {
+  className?: string
+  graphicClassName?: string
+}
+
+export function SnippetPlaceholderIcon({
+  className,
+  graphicClassName,
+}: SnippetPlaceholderIconProps) {
+  return (
+    <div
+      className={cn(
+        'flex size-10 items-center justify-center rounded-[10px] border border-divider-subtle bg-background-default-subtle text-text-tertiary shadow-xs',
+        className,
+      )}
+      aria-hidden="true"
+    >
+      <span className={cn('relative block size-8', graphicClassName)}>
+        <span className="absolute top-1/2 left-1/2 h-4 w-0.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-util-colors-blue-blue-500" />
+        <span className="absolute top-0.5 left-0.5 size-2.5 rounded-xs bg-util-colors-blue-blue-300 shadow-xs" />
+        <span className="absolute top-1/2 right-0.5 size-2.5 -translate-y-1/2 rounded-xs bg-util-colors-blue-blue-600 shadow-xs" />
+        <span className="absolute bottom-0.5 left-0.5 size-2.5 rounded-xs bg-util-colors-indigo-indigo-400 shadow-xs" />
+      </span>
+    </div>
+  )
+}
diff --git a/web/app/components/snippets/components/snippet-sidebar.tsx b/web/app/components/snippets/components/snippet-sidebar.tsx
index 4f197e72f7c..a8ae1c9c8ef 100644
--- a/web/app/components/snippets/components/snippet-sidebar.tsx
+++ b/web/app/components/snippets/components/snippet-sidebar.tsx
@@ -12,6 +12,7 @@ import ConfigVarModal from '@/app/components/app/configuration/config-var/config
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import VarList from '@/app/components/workflow/nodes/start/components/var-list'
 import { hasDuplicateStr } from '@/utils/var'
+import { SnippetPlaceholderIcon } from './snippet-placeholder-icon'
 
 type SnippetSidebarProps = {
   snippet: SnippetDetail
@@ -95,16 +96,20 @@ export const SnippetSidebarContent = ({
     <div className={cn('flex h-full min-h-0 flex-col overflow-hidden bg-background-default', className)}>
       <div className="shrink-0 px-3 py-2">
         <div className="flex items-start gap-3">
+          <SnippetPlaceholderIcon
+            className="size-12 shrink-0 rounded-[16px]"
+            graphicClassName="size-9"
+          />
           <div className="min-w-0 grow">
             <div className="truncate system-xl-semibold text-text-primary" title={snippet.name}>{snippet.name}</div>
-            {!!snippet.description && (
-              <div className="mt-3 truncate system-sm-regular text-text-tertiary" title={snippet.description}>
-                {snippet.description}
-              </div>
-            )}
           </div>
           <SnippetInfoDropdown snippet={snippet} />
         </div>
+        {!!snippet.description && (
+          <div className="mt-2 truncate system-sm-regular text-text-tertiary" title={snippet.description}>
+            {snippet.description}
+          </div>
+        )}
       </div>
 
       <div className="flex min-h-0 grow flex-col px-3 pt-6">