feat: refine snippet layout (#37517)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

eslint-suppressions.json

@@ -192,11 +192,6 @@
       "count": 1
     }
   },
-  "web/app/(commonLayout)/snippets/[snippetId]/page.tsx": {
-    "no-restricted-imports": {
-      "count": 1
-    }
-  },
   "web/app/(shareLayout)/components/authenticated-layout.tsx": {
     "jsx-a11y/click-events-have-key-events": {
       "count": 1

web/app/(commonLayout)/snippets/[snippetId]/page.tsx

@@ -1,4 +1,4 @@
-import { redirect } from 'next/navigation'
+import { redirect } from '@/next/navigation'
 
 const Page = async (props: {
   params: Promise<{ snippetId: string }>

web/app/components/apps/__tests__/list.spec.tsx

@@ -417,15 +417,17 @@ describe('List', () => {
       expect(screen.getByRole('button', { name: 'common.operation.create' }))!.toBeInTheDocument()
     })
 
-    it('should render link to snippets before the create button', () => {
+    it('should render sort filter before search and the snippets link', () => {
       renderList()
 
       const sortButton = screen.getByRole('button', { name: 'Sort by Last modified' })
+      const searchInput = screen.getByRole('searchbox', { name: 'app.gotoAnything.actions.searchApplications' })
       const snippetsLink = screen.getByRole('link', { name: 'app.studio.viewSnippets' })
       const createButton = screen.getByRole('button', { name: 'common.operation.create' })
 
       expect(snippetsLink).toHaveAttribute('href', '/snippets')
-      expect(sortButton.compareDocumentPosition(snippetsLink) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      expect(sortButton.compareDocumentPosition(searchInput) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+      expect(searchInput.compareDocumentPosition(snippetsLink) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
       expect(snippetsLink.compareDocumentPosition(createButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
     })
 

web/app/components/apps/app-list-header-filters.tsx

@@ -62,6 +62,7 @@ export function AppListHeaderFilters({
           showLeadingIcon={false}
         />
         <CreatorsFilter value={creatorIDs} onChange={onCreatorIDsChange} />
+        <AppSortFilter value={sortBy} onChange={onSortByChange} />
         <SearchInput
           className="w-50"
           value={keywords}
@@ -70,7 +71,6 @@ export function AppListHeaderFilters({
         />
       </div>
       <div className="flex items-center gap-2">
-        <AppSortFilter value={sortBy} onChange={onSortByChange} />
         <Link
           href="/snippets"
           className="flex h-8 items-center rounded-lg px-3 text-sm font-semibold text-text-secondary outline-hidden hover:bg-state-base-hover hover:text-text-primary focus-visible:ring-2 focus-visible:ring-state-accent-solid"

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

@@ -484,6 +484,21 @@ describe('MainNav', () => {
     expect(screen.getByRole('link', { name: /common.mainNav.home/ })).not.toHaveAttribute('aria-current')
   })
 
+  it('hides the main menu on snippet detail routes while keeping account settings available', () => {
+    mockPathname = '/snippets/snippet-1/orchestrate'
+
+    renderMainNav()
+
+    expect(screen.getByRole('complementary')).toHaveClass('w-16')
+    expect(screen.queryByLabelText('Dify')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'common.mainNav.workspace.openMenu' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /common.mainNav.home/ })).not.toBeInTheDocument()
+    expect(screen.queryByRole('link', { name: /common.menus.apps/ })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'explore.sidebar.webApps' })).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.account.account' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.mainNav.help.openMenu' })).toBeInTheDocument()
+  })
+
   it('replaces global navigation with app detail navigation on app routes', () => {
     mockPathname = '/app/app-1/overview'
 

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

@@ -60,6 +60,12 @@ const isDatasetDetailPathname = (pathname: string) => {
   return true
 }
 
+const isSnippetDetailPathname = (pathname: string) => {
+  const [section, snippetId] = pathname.split('/').filter(Boolean)
+
+  return section === 'snippets' && !!snippetId
+}
+
 const MainNav = ({
   className,
 }: MainNavProps) => {
@@ -70,6 +76,7 @@ const MainNav = ({
   const showEnvTag = langGeniusVersionInfo.current_env === 'TESTING' || langGeniusVersionInfo.current_env === 'DEVELOPMENT'
   const showAppDetailNavigation = !isCurrentWorkspaceDatasetOperator && pathname.startsWith('/app/')
   const showDatasetDetailNavigation = isDatasetDetailPathname(pathname)
+  const showSnippetDetailBottomNavigation = isSnippetDetailPathname(pathname)
   const showDetailNavigation = showAppDetailNavigation || showDatasetDetailNavigation
   const { hasAppDetail, appSidebarExpand, setAppDetail, setAppSidebarExpand } = useAppStore(useShallow(state => ({
     hasAppDetail: !!state.appDetail,
@@ -87,7 +94,9 @@ const MainNav = ({
   const detailNavigationTransitionTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const isDetailNavigationHoverPreviewOpen = isCollapsedDetailNavigation && detailNavigationHoverPreviewOpen
   const detailNavigationVisibleExpanded = detailNavigationExpanded || isDetailNavigationHoverPreviewOpen
-  const bottomNavigationExpanded = !showDetailNavigation || detailNavigationVisibleExpanded
+  const bottomNavigationExpanded = showSnippetDetailBottomNavigation
+    ? false
+    : !showDetailNavigation || detailNavigationVisibleExpanded
   const handleToggleDetailNavigation = useCallback(() => {
     if (isDetailNavigationHoverPreviewOpen) {
       if (detailNavigationTransitionTimerRef.current)
@@ -234,7 +243,9 @@ const MainNav = ({
           ? detailNavigationExpanded
             ? 'w-[248px] bg-background-body p-1'
             : 'w-16 bg-background-body p-1'
-          : 'w-60 flex-col',
+          : showSnippetDetailBottomNavigation
+            ? 'w-16 bg-background-body p-1'
+            : 'w-60 flex-col',
         'bg-background-body',
         className,
       )}
@@ -267,32 +278,36 @@ const MainNav = ({
                     onToggle={handleToggleDetailNavigation}
                   />
                 )
-            : (
-                <>
-                  <div className="flex items-center justify-between pt-3 pr-2 pb-2 pl-4">
-                    {renderLogo()}
-                    <MainNavSearchButton />
-                  </div>
-                  <div className="p-2">
-                    <WorkspaceCard />
-                  </div>
-                </>
-              )}
+            : showSnippetDetailBottomNavigation
+              ? null
+              : (
+                  <>
+                    <div className="flex items-center justify-between pt-3 pr-2 pb-2 pl-4">
+                      {renderLogo()}
+                      <MainNavSearchButton />
+                    </div>
+                    <div className="p-2">
+                      <WorkspaceCard />
+                    </div>
+                  </>
+                )}
           {showDetailNavigation
             ? showAppDetailNavigation
               ? <AppDetailSection expand={detailNavigationVisibleExpanded} />
               : <DatasetDetailSection expand={detailNavigationVisibleExpanded} />
-            : (
-                <>
-                  <nav className="flex flex-col gap-px p-2">
-                    {navItems.map(item => (
-                      <MainNavLink key={item.href} item={item} pathname={pathname} />
-                    ))}
-                  </nav>
-                  {!isCurrentWorkspaceDatasetOperator && <WebAppsSection />}
-                </>
-              )}
-          {showEnvTag && detailNavigationVisibleExpanded && (
+            : showSnippetDetailBottomNavigation
+              ? null
+              : (
+                  <>
+                    <nav className="flex flex-col gap-px p-2">
+                      {navItems.map(item => (
+                        <MainNavLink key={item.href} item={item} pathname={pathname} />
+                      ))}
+                    </nav>
+                    {!isCurrentWorkspaceDatasetOperator && <WebAppsSection />}
+                  </>
+                )}
+          {showEnvTag && !showSnippetDetailBottomNavigation && detailNavigationVisibleExpanded && (
             <div className="relative z-30 mt-auto shrink-0 px-3 pb-2">
               <EnvNav />
             </div>