From 7b7956f3e7ca619d0c9954029afadfbf696923d1 Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Fri, 3 Jul 2026 15:18:13 +0800
Subject: [PATCH] feat: snippet siderbar update (#38371)

---
 .../apps/app-list-header-filters.tsx          |  3 +-
 .../snippet-collapsed-preview.spec.tsx        | 11 ++++
 .../__tests__/snippet-sidebar.spec.tsx        | 13 +++++
 .../components/snippet-collapsed-preview.tsx  | 51 ++++++++++++++++---
 .../components/snippet-detail-section.tsx     |  2 +-
 .../components/snippet-placeholder-icon.tsx   |  9 +---
 .../snippets/components/snippet-sidebar.tsx   | 15 ++++++
 web/i18n/ar-TN/app.json                       |  2 +-
 web/i18n/de-DE/app.json                       |  2 +-
 web/i18n/en-US/app.json                       |  2 +-
 web/i18n/es-ES/app.json                       |  2 +-
 web/i18n/fa-IR/app.json                       |  2 +-
 web/i18n/fr-FR/app.json                       |  2 +-
 web/i18n/hi-IN/app.json                       |  2 +-
 web/i18n/id-ID/app.json                       |  2 +-
 web/i18n/it-IT/app.json                       |  2 +-
 web/i18n/ja-JP/app.json                       |  2 +-
 web/i18n/ko-KR/app.json                       |  2 +-
 web/i18n/nl-NL/app.json                       |  2 +-
 web/i18n/pl-PL/app.json                       |  2 +-
 web/i18n/pt-BR/app.json                       |  2 +-
 web/i18n/ro-RO/app.json                       |  2 +-
 web/i18n/ru-RU/app.json                       |  2 +-
 web/i18n/sl-SI/app.json                       |  2 +-
 web/i18n/th-TH/app.json                       |  2 +-
 web/i18n/tr-TR/app.json                       |  2 +-
 web/i18n/uk-UA/app.json                       |  2 +-
 web/i18n/vi-VN/app.json                       |  2 +-
 web/i18n/zh-Hans/app.json                     |  2 +-
 web/i18n/zh-Hant/app.json                     |  2 +-
 30 files changed, 110 insertions(+), 40 deletions(-)
 create mode 100644 web/app/components/snippets/components/__tests__/snippet-collapsed-preview.spec.tsx

diff --git a/web/app/components/apps/app-list-header-filters.tsx b/web/app/components/apps/app-list-header-filters.tsx
index 824e77dd7d2..36b453c77bb 100644
--- a/web/app/components/apps/app-list-header-filters.tsx
+++ b/web/app/components/apps/app-list-header-filters.tsx
@@ -77,8 +77,9 @@ export function AppListHeaderFilters({
       <div className="ml-auto flex max-w-full min-w-0 flex-wrap items-center justify-end gap-2">
         <Link
           href="/snippets"
-          className="flex h-8 items-center rounded-lg px-3 text-sm font-semibold whitespace-nowrap text-text-secondary outline-hidden hover:bg-state-base-hover hover:text-text-primary focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+          className="inline-flex h-8 cursor-pointer items-center justify-center gap-1 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-3.5 text-[13px] leading-4 font-medium whitespace-nowrap text-components-button-secondary-text shadow-xs outline-hidden backdrop-blur-[5px] hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid"
         >
+          <span aria-hidden className="i-ri-braces-line size-4 shrink-0" />
           {t('studio.viewSnippets', { ns: 'app' })}
         </Link>
         {showCreateButton && (
diff --git a/web/app/components/snippets/components/__tests__/snippet-collapsed-preview.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-collapsed-preview.spec.tsx
new file mode 100644
index 00000000000..ab07e4f9444
--- /dev/null
+++ b/web/app/components/snippets/components/__tests__/snippet-collapsed-preview.spec.tsx
@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import { SnippetCollapsedPreview } from '../snippet-collapsed-preview'
+
+describe('SnippetCollapsedPreview', () => {
+  it('should render collapsed route navigation and input field count', () => {
+    render(<SnippetCollapsedPreview inputFieldCount={2} snippetId="snippet-1" />)
+
+    expect(screen.getByRole('link', { name: 'snippet.sectionOrchestrate' })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
+    expect(screen.getByLabelText('2 snippet.inputVariables')).toHaveTextContent('2')
+  })
+})
diff --git a/web/app/components/snippets/components/__tests__/snippet-sidebar.spec.tsx b/web/app/components/snippets/components/__tests__/snippet-sidebar.spec.tsx
index 4b2a697278d..9f0328e3024 100644
--- a/web/app/components/snippets/components/__tests__/snippet-sidebar.spec.tsx
+++ b/web/app/components/snippets/components/__tests__/snippet-sidebar.spec.tsx
@@ -152,6 +152,19 @@ describe('SnippetSidebarContent', () => {
     expect(capturedVarListProps?.readonly).toBe(true)
   })
 
+  it('should render the orchestrate route menu item', () => {
+    render(
+      <SnippetSidebarContent
+        snippet={snippet}
+        fields={fields}
+        readonly={false}
+        onFieldsChange={vi.fn()}
+      />,
+    )
+
+    expect(screen.getByRole('link', { name: 'snippet.sectionOrchestrate' })).toHaveAttribute('href', '/snippets/snippet-1/orchestrate')
+  })
+
   it('should add a new input field from the config variable modal', () => {
     const onFieldsChange = vi.fn()
     render(
diff --git a/web/app/components/snippets/components/snippet-collapsed-preview.tsx b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
index 731af1c744d..81632114df9 100644
--- a/web/app/components/snippets/components/snippet-collapsed-preview.tsx
+++ b/web/app/components/snippets/components/snippet-collapsed-preview.tsx
@@ -1,27 +1,62 @@
 'use client'
 
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+import NavLink from '@/app/components/app-sidebar/nav-link'
 import { SnippetPlaceholderIcon } from './snippet-placeholder-icon'
 
+const NodeTreeIcon = ({ className }: { className?: string }) => (
+  <span className={cn('i-ri-node-tree', className)} />
+)
+
 export function SnippetCollapsedPreview({
   inputFieldCount,
+  snippetId,
 }: {
   inputFieldCount: number
+  snippetId?: string
 }) {
+  const { t } = useTranslation()
+  const sectionLabel = t('sectionOrchestrate', { ns: 'snippet' })
+
   return (
     <div
-      className="flex min-h-0 grow flex-col items-center px-2 pt-4"
+      className="flex min-h-0 grow flex-col items-center px-2"
       aria-label="Snippet collapsed preview"
     >
-      <SnippetPlaceholderIcon />
+      <div className="mb-3.5 flex w-full shrink-0 justify-center px-3.5 pt-0.5 pb-0.75">
+        <div className="my-0 h-px w-6.75 shrink-0 bg-divider-subtle" data-testid="divider"></div>
+      </div>
+      <SnippetPlaceholderIcon className="size-9" />
       <div className="my-4 h-px w-8 rounded-full bg-divider-subtle" aria-hidden="true" />
+      {snippetId
+        ? (
+            <NavLink
+              mode="collapse"
+              name={sectionLabel}
+              href={`/snippets/${snippetId}/orchestrate`}
+              active
+              iconMap={{ selected: NodeTreeIcon, normal: NodeTreeIcon }}
+            />
+          )
+        : (
+            <div
+              aria-label={sectionLabel}
+              className="flex size-8 items-center justify-center rounded-lg border-t-[0.75px] border-r-[0.25px] border-b-[0.25px] border-l-[0.75px] border-effects-highlight-lightmode-off bg-components-menu-item-bg-active p-1.5 text-text-accent-light-mode-only"
+            >
+              <div className="flex size-5 items-center justify-center">
+                <NodeTreeIcon className="size-4.5 shrink-0" />
+              </div>
+            </div>
+          )}
       <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"
-        aria-label={`${inputFieldCount} input fields`}
+        className={cn(
+          'mt-4 flex min-w-6 items-center justify-center rounded-full bg-background-default-subtle px-2 text-2xs leading-4 font-normal text-text-tertiary',
+          inputFieldCount > 99 ? 'h-5' : 'size-5',
+        )}
+        aria-label={`${inputFieldCount} ${t('inputVariables', { ns: 'snippet' })}`}
       >
-        <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-4 items-center justify-center rounded-full border-2 border-components-panel-bg bg-state-accent-solid text-2xs leading-none text-text-primary-on-surface shadow-xs">
-          {inputFieldCount}
-        </span>
+        {inputFieldCount}
       </div>
     </div>
   )
diff --git a/web/app/components/snippets/components/snippet-detail-section.tsx b/web/app/components/snippets/components/snippet-detail-section.tsx
index e9798a903d5..0fa9d81442e 100644
--- a/web/app/components/snippets/components/snippet-detail-section.tsx
+++ b/web/app/components/snippets/components/snippet-detail-section.tsx
@@ -19,7 +19,7 @@ export function SnippetDetailSection({ expand }: SnippetDetailSectionProps) {
   const snippetInputFields = useSnippetDraftStore(state => state.inputFields)
 
   if (!expand)
-    return <SnippetCollapsedPreview inputFieldCount={snippetInputFields.length} />
+    return <SnippetCollapsedPreview inputFieldCount={snippetInputFields.length} snippetId={snippetNavigation.snippet?.id} />
 
   if (!snippetNavigation.snippet || !snippetNavigation.onFieldsChange)
     return null
diff --git a/web/app/components/snippets/components/snippet-placeholder-icon.tsx b/web/app/components/snippets/components/snippet-placeholder-icon.tsx
index 982ba688e80..92153214719 100644
--- a/web/app/components/snippets/components/snippet-placeholder-icon.tsx
+++ b/web/app/components/snippets/components/snippet-placeholder-icon.tsx
@@ -14,17 +14,12 @@ export function SnippetPlaceholderIcon({
   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',
+        'flex size-10 shrink-0 items-center justify-center rounded-[10px] border border-divider-subtle bg-state-accent-hover text-text-accent 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>
+      <span className={cn('i-ri-braces-line size-6', graphicClassName)} />
     </div>
   )
 }
diff --git a/web/app/components/snippets/components/snippet-sidebar.tsx b/web/app/components/snippets/components/snippet-sidebar.tsx
index a2090979d9b..83ae818f53a 100644
--- a/web/app/components/snippets/components/snippet-sidebar.tsx
+++ b/web/app/components/snippets/components/snippet-sidebar.tsx
@@ -7,6 +7,7 @@ import { toast } from '@langgenius/dify-ui/toast'
 import { isEqual } from 'es-toolkit/predicate'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import NavLink from '@/app/components/app-sidebar/nav-link'
 import SnippetInfoDropdown from '@/app/components/app-sidebar/snippet-info/dropdown'
 import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
@@ -36,6 +37,10 @@ const toSnippetInputField = (field: InputVar): SnippetInputField => ({
   type: field.type as unknown as SnippetInputField['type'],
 })
 
+const NodeTreeIcon = ({ className }: { className?: string }) => (
+  <span className={cn('i-ri-node-tree', className)} />
+)
+
 export const SnippetSidebarContent = ({
   snippet,
   fields,
@@ -109,6 +114,16 @@ export const SnippetSidebarContent = ({
         )}
       </div>
 
+      <nav className="shrink-0 px-3 pt-4">
+        <NavLink
+          mode="expand"
+          name={t('sectionOrchestrate', { ns: 'snippet' })}
+          href={`/snippets/${snippet.id}/orchestrate`}
+          active
+          iconMap={{ selected: NodeTreeIcon, normal: NodeTreeIcon }}
+        />
+      </nav>
+
       <div className="flex min-h-0 grow flex-col px-3 pt-6">
         <Field
           title={t('inputVariables', { ns: 'snippet' })}
diff --git a/web/i18n/ar-TN/app.json b/web/i18n/ar-TN/app.json
index c49375e1990..022b043a51b 100644
--- a/web/i18n/ar-TN/app.json
+++ b/web/i18n/ar-TN/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "فشل تحديث النجمة",
   "studio.starred": "المميزة بنجمة",
   "studio.unstarApp": "إزالة النجمة من التطبيق",
-  "studio.viewSnippets": "عرض المقتطفات",
+  "studio.viewSnippets": "المقتطفات",
   "switch": "التبديل إلى Workflow Orchestrate",
   "switchLabel": "نسخة التطبيق التي سيتم إنشاؤها",
   "switchStart": "بدء التبديل",
diff --git a/web/i18n/de-DE/app.json b/web/i18n/de-DE/app.json
index 4c791f98f7a..1c849c5a3aa 100644
--- a/web/i18n/de-DE/app.json
+++ b/web/i18n/de-DE/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Stern konnte nicht aktualisiert werden",
   "studio.starred": "Markiert",
   "studio.unstarApp": "Markierung der App entfernen",
-  "studio.viewSnippets": "Snippets anzeigen",
+  "studio.viewSnippets": "Snippets",
   "switch": "Zu Workflow-Orchestrierung wechseln",
   "switchLabel": "Die zu erstellende App-Kopie",
   "switchStart": "Wechsel starten",
diff --git a/web/i18n/en-US/app.json b/web/i18n/en-US/app.json
index 0a828528c93..02dd880b584 100644
--- a/web/i18n/en-US/app.json
+++ b/web/i18n/en-US/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Failed to update star",
   "studio.starred": "Starred",
   "studio.unstarApp": "Unstar app",
-  "studio.viewSnippets": "View Snippets",
+  "studio.viewSnippets": "Snippets",
   "switch": "Switch to Workflow Orchestrate",
   "switchLabel": "The app copy to be created",
   "switchStart": "Start switch",
diff --git a/web/i18n/es-ES/app.json b/web/i18n/es-ES/app.json
index ad8c42a07b4..1a0171dd214 100644
--- a/web/i18n/es-ES/app.json
+++ b/web/i18n/es-ES/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "No se pudo actualizar la estrella",
   "studio.starred": "Destacadas",
   "studio.unstarApp": "Quitar estrella de la aplicación",
-  "studio.viewSnippets": "Ver fragmentos",
+  "studio.viewSnippets": "Fragmentos",
   "switch": "Cambiar a Orquestación de Flujo de Trabajo",
   "switchLabel": "La copia de la app a crear",
   "switchStart": "Iniciar cambio",
diff --git a/web/i18n/fa-IR/app.json b/web/i18n/fa-IR/app.json
index 54c71d49d96..c7b60e28545 100644
--- a/web/i18n/fa-IR/app.json
+++ b/web/i18n/fa-IR/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "به‌روزرسانی ستاره ناموفق بود",
   "studio.starred": "ستاره‌دار",
   "studio.unstarApp": "برداشتن ستاره برنامه",
-  "studio.viewSnippets": "مشاهده قطعه‌ها",
+  "studio.viewSnippets": "قطعه‌ها",
   "switch": "تغییر به سازماندهی گردش کار",
   "switchLabel": "نسخه برنامه که ایجاد می‌شود",
   "switchStart": "شروع تغییر",
diff --git a/web/i18n/fr-FR/app.json b/web/i18n/fr-FR/app.json
index 726908c8637..6084508f436 100644
--- a/web/i18n/fr-FR/app.json
+++ b/web/i18n/fr-FR/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Échec de la mise à jour du favori",
   "studio.starred": "Favoris",
   "studio.unstarApp": "Retirer des favoris",
-  "studio.viewSnippets": "Voir les extraits",
+  "studio.viewSnippets": "Extraits",
   "switch": "Passer à l'orchestration de flux de travail",
   "switchLabel": "La copie de l'application à créer",
   "switchStart": "Commencer la commutation",
diff --git a/web/i18n/hi-IN/app.json b/web/i18n/hi-IN/app.json
index 53b3be0c718..4398da78167 100644
--- a/web/i18n/hi-IN/app.json
+++ b/web/i18n/hi-IN/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "स्टार अपडेट करने में विफल",
   "studio.starred": "स्टार किए गए",
   "studio.unstarApp": "ऐप से स्टार हटाएं",
-  "studio.viewSnippets": "स्निपेट देखें",
+  "studio.viewSnippets": "स्निपेट",
   "switch": "वर्कफ़्लो ऑर्केस्ट्रेट पर स्विच करें",
   "switchLabel": "बनाई जाने वाली ऐप कॉपी",
   "switchStart": "स्विच शुरू करें",
diff --git a/web/i18n/id-ID/app.json b/web/i18n/id-ID/app.json
index 61062a00eaf..02860044600 100644
--- a/web/i18n/id-ID/app.json
+++ b/web/i18n/id-ID/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Gagal memperbarui bintang",
   "studio.starred": "Berbintang",
   "studio.unstarApp": "Hapus bintang aplikasi",
-  "studio.viewSnippets": "Lihat snippet",
+  "studio.viewSnippets": "Snippet",
   "switch": "Beralih ke Workflow Orchestrate",
   "switchLabel": "Salinan aplikasi yang akan dibuat",
   "switchStart": "Sakelar mulai",
diff --git a/web/i18n/it-IT/app.json b/web/i18n/it-IT/app.json
index b3a1f63fbb9..870c6be7c62 100644
--- a/web/i18n/it-IT/app.json
+++ b/web/i18n/it-IT/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Impossibile aggiornare la stella",
   "studio.starred": "Preferite",
   "studio.unstarApp": "Rimuovi app dai preferiti",
-  "studio.viewSnippets": "Visualizza snippet",
+  "studio.viewSnippets": "Snippet",
   "switch": "Passa a Orchestrazione del flusso di lavoro",
   "switchLabel": "La copia dell'app da creare",
   "switchStart": "Inizia il passaggio",
diff --git a/web/i18n/ja-JP/app.json b/web/i18n/ja-JP/app.json
index 6ee232d07c6..399c6a74e89 100644
--- a/web/i18n/ja-JP/app.json
+++ b/web/i18n/ja-JP/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "スターの更新に失敗しました",
   "studio.starred": "スター付き",
   "studio.unstarApp": "アプリのスターを外す",
-  "studio.viewSnippets": "スニペットを表示",
+  "studio.viewSnippets": "スニペット",
   "switch": "ワークフロー オーケストレートに切り替える",
   "switchLabel": "作成されるアプリのコピー",
   "switchStart": "切り替えを開始する",
diff --git a/web/i18n/ko-KR/app.json b/web/i18n/ko-KR/app.json
index f2427211435..8cfe521d6a5 100644
--- a/web/i18n/ko-KR/app.json
+++ b/web/i18n/ko-KR/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "별표 업데이트 실패",
   "studio.starred": "별표 표시됨",
   "studio.unstarApp": "앱 별표 해제",
-  "studio.viewSnippets": "스니펫 보기",
+  "studio.viewSnippets": "스니펫",
   "switch": "워크플로우 오케스트레이션으로 전환하기",
   "switchLabel": "생성될 앱의 복사본",
   "switchStart": "전환 시작하기",
diff --git a/web/i18n/nl-NL/app.json b/web/i18n/nl-NL/app.json
index 5275ff25b81..f71d0fe0d57 100644
--- a/web/i18n/nl-NL/app.json
+++ b/web/i18n/nl-NL/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Ster kon niet worden bijgewerkt",
   "studio.starred": "Gemarkeerd",
   "studio.unstarApp": "Markering van app verwijderen",
-  "studio.viewSnippets": "Snippets bekijken",
+  "studio.viewSnippets": "Snippets",
   "switch": "Switch to Workflow Orchestrate",
   "switchLabel": "The app copy to be created",
   "switchStart": "Start switch",
diff --git a/web/i18n/pl-PL/app.json b/web/i18n/pl-PL/app.json
index 12d8050ff8c..fc5b2799f54 100644
--- a/web/i18n/pl-PL/app.json
+++ b/web/i18n/pl-PL/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Nie udało się zaktualizować gwiazdki",
   "studio.starred": "Oznaczone gwiazdką",
   "studio.unstarApp": "Usuń gwiazdkę aplikacji",
-  "studio.viewSnippets": "Wyświetl fragmenty",
+  "studio.viewSnippets": "Fragmenty",
   "switch": "Przełącz na Orkiestrację Przepływu Pracy",
   "switchLabel": "Kopia aplikacji do utworzenia",
   "switchStart": "Rozpocznij przełączanie",
diff --git a/web/i18n/pt-BR/app.json b/web/i18n/pt-BR/app.json
index 245cdf08db9..3e4019b306b 100644
--- a/web/i18n/pt-BR/app.json
+++ b/web/i18n/pt-BR/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Falha ao atualizar favorito",
   "studio.starred": "Favoritos",
   "studio.unstarApp": "Remover app dos favoritos",
-  "studio.viewSnippets": "Ver snippets",
+  "studio.viewSnippets": "Snippets",
   "switch": "Mudar para Orquestração de Fluxo de Trabalho",
   "switchLabel": "A cópia do aplicativo a ser criada",
   "switchStart": "Iniciar mudança",
diff --git a/web/i18n/ro-RO/app.json b/web/i18n/ro-RO/app.json
index 691620f763b..607b08ee4aa 100644
--- a/web/i18n/ro-RO/app.json
+++ b/web/i18n/ro-RO/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Actualizarea stelei a eșuat",
   "studio.starred": "Marcate cu stea",
   "studio.unstarApp": "Elimină steaua aplicației",
-  "studio.viewSnippets": "Vezi fragmentele",
+  "studio.viewSnippets": "Fragmente",
   "switch": "Comută la Orchestrare Flux de Lucru",
   "switchLabel": "Copia aplicației care urmează să fie creată",
   "switchStart": "Începe comutarea",
diff --git a/web/i18n/ru-RU/app.json b/web/i18n/ru-RU/app.json
index f065bc0c232..597469f9b6d 100644
--- a/web/i18n/ru-RU/app.json
+++ b/web/i18n/ru-RU/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Не удалось обновить отметку",
   "studio.starred": "Избранные",
   "studio.unstarApp": "Удалить приложение из избранного",
-  "studio.viewSnippets": "Посмотреть фрагменты",
+  "studio.viewSnippets": "Фрагменты",
   "switch": "Переключиться на Workflow",
   "switchLabel": "Копия приложения, которая будет создана",
   "switchStart": "Переключиться",
diff --git a/web/i18n/sl-SI/app.json b/web/i18n/sl-SI/app.json
index 3b2272e4222..7046fc2d535 100644
--- a/web/i18n/sl-SI/app.json
+++ b/web/i18n/sl-SI/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Posodobitev zvezdice ni uspela",
   "studio.starred": "Označeno z zvezdico",
   "studio.unstarApp": "Odstrani zvezdico aplikacije",
-  "studio.viewSnippets": "Prikaži izrezke",
+  "studio.viewSnippets": "Izrezki",
   "switch": "Preklopi na Workflow Orchestrate",
   "switchLabel": "Kopija aplikacije, ki bo ustvarjena",
   "switchStart": "Začni preklop",
diff --git a/web/i18n/th-TH/app.json b/web/i18n/th-TH/app.json
index 29295457ffc..e05fcb29c24 100644
--- a/web/i18n/th-TH/app.json
+++ b/web/i18n/th-TH/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "อัปเดตดาวไม่สำเร็จ",
   "studio.starred": "ติดดาวแล้ว",
   "studio.unstarApp": "เลิกติดดาวแอป",
-  "studio.viewSnippets": "ดูสนิปเปต",
+  "studio.viewSnippets": "สนิปเปต",
   "switch": "เปลี่ยนไปใช้ Workflow Orchestrate",
   "switchLabel": "สําเนาโปรเจกต์ที่จะสร้าง",
   "switchStart": "สวิตช์สตาร์ท",
diff --git a/web/i18n/tr-TR/app.json b/web/i18n/tr-TR/app.json
index 14ec262f124..e66f75ff3e7 100644
--- a/web/i18n/tr-TR/app.json
+++ b/web/i18n/tr-TR/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Yıldız güncellenemedi",
   "studio.starred": "Yıldızlı",
   "studio.unstarApp": "Uygulamanın yıldızını kaldır",
-  "studio.viewSnippets": "Snippet'leri görüntüle",
+  "studio.viewSnippets": "Snippet'ler",
   "switch": "İş Akışı Orkestrasyonuna Geç",
   "switchLabel": "Oluşturulacak uygulama kopyası",
   "switchStart": "Geçişi Başlat",
diff --git a/web/i18n/uk-UA/app.json b/web/i18n/uk-UA/app.json
index ee8abb2e275..2400819730e 100644
--- a/web/i18n/uk-UA/app.json
+++ b/web/i18n/uk-UA/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Не вдалося оновити зірку",
   "studio.starred": "Позначені зіркою",
   "studio.unstarApp": "Зняти зірку із застосунку",
-  "studio.viewSnippets": "Переглянути фрагменти",
+  "studio.viewSnippets": "Фрагменти",
   "switch": "Перейти до оркестрації робочого процесу",
   "switchLabel": "Копія додатка, яка буде створена",
   "switchStart": "Почати перемикання",
diff --git a/web/i18n/vi-VN/app.json b/web/i18n/vi-VN/app.json
index 3e4ef2fe495..83fce8b974c 100644
--- a/web/i18n/vi-VN/app.json
+++ b/web/i18n/vi-VN/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "Không thể cập nhật sao",
   "studio.starred": "Đã gắn sao",
   "studio.unstarApp": "Bỏ gắn sao ứng dụng",
-  "studio.viewSnippets": "Xem snippets",
+  "studio.viewSnippets": "Snippets",
   "switch": "Chuyển sang quản lý quy trình",
   "switchLabel": "Bản sao ứng dụng sẽ được tạo",
   "switchStart": "Bắt đầu chuyển",
diff --git a/web/i18n/zh-Hans/app.json b/web/i18n/zh-Hans/app.json
index 17368a5c569..c31ae9ba9e2 100644
--- a/web/i18n/zh-Hans/app.json
+++ b/web/i18n/zh-Hans/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "更新星标失败",
   "studio.starred": "星标",
   "studio.unstarApp": "取消星标应用",
-  "studio.viewSnippets": "查看 Snippets",
+  "studio.viewSnippets": "Snippets",
   "switch": "迁移为工作流编排",
   "switchLabel": "新应用创建为",
   "switchStart": "开始迁移",
diff --git a/web/i18n/zh-Hant/app.json b/web/i18n/zh-Hant/app.json
index 9cbc5a1c1ba..0eebbd6aa4b 100644
--- a/web/i18n/zh-Hant/app.json
+++ b/web/i18n/zh-Hant/app.json
@@ -224,7 +224,7 @@
   "studio.starFailed": "更新星標失敗",
   "studio.starred": "星標",
   "studio.unstarApp": "取消星標應用",
-  "studio.viewSnippets": "查看片段",
+  "studio.viewSnippets": "片段",
   "switch": "遷移為工作流編排",
   "switchLabel": "新應用建立為",
   "switchStart": "開始遷移",