feat(web): add snippet collapsed nav preview

web/app/components/main-nav/__tests__/index.spec.tsx

@@ -677,6 +677,8 @@ describe('MainNav', () => {
     expect(screen.getByRole('complementary')).toHaveClass('p-1')
     expect(screen.getByTestId('snippet-detail-top')).toHaveAttribute('data-expand', 'false')
     expect(screen.queryByTestId('snippet-sidebar-content')).not.toBeInTheDocument()
+    expect(screen.getByLabelText('Snippet collapsed preview')).toBeInTheDocument()
+    expect(screen.getByLabelText('1 input fields')).toBeInTheDocument()
     expect(localStorage.getItem(DETAIL_SIDEBAR_STORAGE_KEY)).toBe('collapse')
   })
 

web/app/components/main-nav/index.tsx

@@ -52,6 +52,41 @@ function SecondarySidebarHelpMenu({
   )
 }
 
+function SnippetCollapsedPreview({
+  inputFieldCount,
+}: {
+  inputFieldCount: number
+}) {
+  return (
+    <div
+      className="flex min-h-0 grow flex-col items-center px-2 pt-12"
+      aria-label="Snippet collapsed preview"
+    >
+      <div
+        className="flex size-11 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-12 h-0.5 w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
+      <div
+        className="relative flex size-11 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-6" />
+        <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)
 
@@ -304,16 +339,18 @@ const MainNav = ({
                   ? <AgentDetailSection expand={detailNavigationVisibleExpanded} />
                   : showDeploymentDetailNavigation
                     ? <DeploymentDetailSection expand={detailNavigationVisibleExpanded} />
-                    : detailNavigationVisibleExpanded && snippetNavigation.snippet && snippetNavigation.onFieldsChange
+                    : detailNavigationVisibleExpanded
-                      ? (
+                      ? snippetNavigation.snippet && snippetNavigation.onFieldsChange
-                          <SnippetSidebarContent
+                        ? (
-                            snippet={snippetNavigation.snippet}
+                            <SnippetSidebarContent
-                            fields={snippetInputFields}
+                              snippet={snippetNavigation.snippet}
-                            readonly={snippetNavigation.readonly}
+                              fields={snippetInputFields}
-                            onFieldsChange={snippetNavigation.onFieldsChange}
+                              readonly={snippetNavigation.readonly}
-                          />
+                              onFieldsChange={snippetNavigation.onFieldsChange}
-                        )
+                            />
-                      : null
+                          )
+                        : null
+                      : <SnippetCollapsedPreview inputFieldCount={snippetInputFields.length} />
             : (
                 <>
                   <nav className="flex flex-col gap-px p-2">