From 9ca24a5b8f102ac2403d2494cf4f6ae2937c17f5 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 23 Jun 2026 12:01:52 +0800
Subject: [PATCH] feat(web): move snippet collapsed preview component

---
 web/app/components/main-nav/index.tsx         | 36 +------------------
 .../components/snippet-collapsed-preview.tsx  | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+), 35 deletions(-)
 create mode 100644 web/app/components/snippets/components/snippet-collapsed-preview.tsx

diff --git a/web/app/components/main-nav/index.tsx b/web/app/components/main-nav/index.tsx
index fdace1f838f..453f0790e13 100644
--- a/web/app/components/main-nav/index.tsx
+++ b/web/app/components/main-nav/index.tsx
@@ -14,6 +14,7 @@ import DatasetDetailTop from '@/app/components/app-sidebar/dataset-detail-top'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import DifyLogo from '@/app/components/base/logo/dify-logo'
 import EnvNav from '@/app/components/header/env-nav'
+import { SnippetCollapsedPreview } from '@/app/components/snippets/components/snippet-collapsed-preview'
 import { SnippetSidebarContent } from '@/app/components/snippets/components/snippet-sidebar'
 import { useSnippetDraftStore } from '@/app/components/snippets/draft-store'
 import { useSnippetDetailStore } from '@/app/components/snippets/store'
@@ -52,41 +53,6 @@ function SecondarySidebarHelpMenu({
   )
 }
 
-function SnippetCollapsedPreview({
-  inputFieldCount,
-}: {
-  inputFieldCount: number
-}) {
-  return (
-    <div
-      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-[16px] border border-divider-subtle bg-background-default-subtle text-text-tertiary shadow-xs"
-        aria-hidden="true"
-      >
-        <span className="relative block size-6">
-          <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 left-0 size-3 rounded-md bg-util-colors-blue-blue-300 shadow-xs" />
-          <span className="absolute top-1/2 right-0 size-3 -translate-y-1/2 rounded-md bg-util-colors-blue-blue-600 shadow-xs" />
-          <span className="absolute bottom-0 left-0 size-3 rounded-md bg-util-colors-indigo-indigo-400 shadow-xs" />
-        </span>
-      </div>
-      <div className="my-2 h-0.5 w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
-      <div
-        className="relative flex size-8 items-center justify-center rounded-[16px] border border-divider-subtle bg-background-default-subtle text-text-accent shadow-xs"
-        aria-label={`${inputFieldCount} input fields`}
-      >
-        <span aria-hidden="true" className="i-custom-vender-solid-development-variable-02 size-5" />
-        <span className="absolute -right-1.5 -bottom-1.5 flex size-5.5 items-center justify-center rounded-full border-2 border-components-panel-bg bg-state-accent-solid text-xs leading-none font-semibold text-text-primary-on-surface shadow-xs">
-          {inputFieldCount}
-        </span>
-      </div>
-    </div>
-  )
-}
-
 const isDatasetDetailPathname = (pathname: string) => {
   const [section, datasetId, subSection, action] = pathname.split('/').filter(Boolean)
 
diff --git a/web/app/components/snippets/components/snippet-collapsed-preview.tsx b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
new file mode 100644
index 00000000000..9baab992c03
--- /dev/null
+++ b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+export function SnippetCollapsedPreview({
+  inputFieldCount,
+}: {
+  inputFieldCount: number
+}) {
+  return (
+    <div
+      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-[16px] border border-divider-subtle bg-background-default-subtle text-text-tertiary shadow-xs"
+        aria-hidden="true"
+      >
+        <span className="relative block size-6">
+          <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 left-0 size-3 rounded-md bg-util-colors-blue-blue-300 shadow-xs" />
+          <span className="absolute top-1/2 right-0 size-3 -translate-y-1/2 rounded-md bg-util-colors-blue-blue-600 shadow-xs" />
+          <span className="absolute bottom-0 left-0 size-3 rounded-md bg-util-colors-indigo-indigo-400 shadow-xs" />
+        </span>
+      </div>
+      <div className="my-2 h-0.5 w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
+      <div
+        className="relative flex size-8 items-center justify-center rounded-[16px] border border-divider-subtle bg-background-default-subtle text-text-accent shadow-xs"
+        aria-label={`${inputFieldCount} input fields`}
+      >
+        <span aria-hidden="true" className="i-custom-vender-solid-development-variable-02 size-5" />
+        <span className="absolute -right-1.5 -bottom-1.5 flex size-5.5 items-center justify-center rounded-full border-2 border-components-panel-bg bg-state-accent-solid text-xs leading-none font-semibold text-text-primary-on-surface shadow-xs">
+          {inputFieldCount}
+        </span>
+      </div>
+    </div>
+  )
+}