From d7b4ef33ed5592fbe544b6ec1fe2a597d2f08699 Mon Sep 17 00:00:00 2001
From: Domagoj Kriskovic <dom.kriskovic@overleaf.com>
Date: Mon, 17 Aug 2026 14:42:31 +0200
Subject: [PATCH] Add "New" badge to library nav link and a feedback link on
 the library page

GitOrigin-RevId: 6c936ca8168dd718c4eaf806f426d5c00078add8
---
 .../Features/Tutorial/TutorialController.mjs  |  1 +
 .../web/frontend/extracted-translations.json  |  1 +
 .../components/sidebar/sidebar-ds-nav.tsx     |  7 ++-
 services/web/locales/en.json                  |  1 +
 .../sidebar/sidebar-ds-nav.test.tsx           | 45 ++++++++++++++++++-
 5 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/services/web/app/src/Features/Tutorial/TutorialController.mjs b/services/web/app/src/Features/Tutorial/TutorialController.mjs
index 45673745c3..1859f1bb9b 100644
--- a/services/web/app/src/Features/Tutorial/TutorialController.mjs
+++ b/services/web/app/src/Features/Tutorial/TutorialController.mjs
@@ -33,6 +33,7 @@ const VALID_KEYS = [
   'themed-dashboard-intro',
   'dimensions-consent',
   'dimensions-rail-popover',
+  'library-new-badge',
 ]
 
 // tutorialKey is validated against the same known-key enum the handlers
diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index f7ba1b492a..57009202b8 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -1151,6 +1151,7 @@
   "lets_get_those_premium_features": "",
   "lets_get_you_set_up": "",
   "library": "",
+  "library_is_new_give_feedback": "",
   "license": "",
   "license_allocated": "",
   "license_not_allocated": "",
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
index abebbc38c2..087723d5e3 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
@@ -36,8 +36,10 @@ function SidebarDsNav({
       ? trashActive
       : selectedTagId === undefined && filter === 'trashed'
   const [dsNavLibraryLinkModule] = importOverleafModules('dsNavLibraryLink')
-  const DsNavLibraryLink: JSXElementConstructor<{ active?: boolean }> =
-    dsNavLibraryLinkModule?.import.default
+  const DsNavLibraryLink: JSXElementConstructor<{
+    active?: boolean
+    inLibrary?: boolean
+  }> = dsNavLibraryLinkModule?.import.default
   const { mousePos, getHandleProps, getTargetProps } = usePersistedResize({
     name: 'project-sidebar',
   })
@@ -87,6 +89,7 @@ function SidebarDsNav({
               {DsNavLibraryLink && (
                 <DsNavLibraryLink
                   active={activePage === 'library' && !trashActive}
+                  inLibrary={activePage === 'library'}
                 />
               )}
               <button
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index 73b7d0b0f0..66ac9435e5 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1473,6 +1473,7 @@
   "libraries": "Libraries",
   "library": "Library",
   "library_entry_too_large": "This entry is too large to add. Library entries can be up to __limit__. Try trimming the entry and adding it again.",
+  "library_is_new_give_feedback": "Library is new. <0>Give feedback</0>",
   "library_size_limit_reached": "Your library has reached its size limit of __limit__. Remove some references before adding more.",
   "library_too_many_references": "Your library has reached its limit of __limit__ references. Remove some references before adding more.",
   "license": "License",
diff --git a/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx b/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx
index 8b57b77813..83e8b5e995 100644
--- a/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx
+++ b/services/web/test/frontend/features/project-list/components/sidebar/sidebar-ds-nav.test.tsx
@@ -1,4 +1,4 @@
-import { screen, waitFor } from '@testing-library/react'
+import { screen, waitFor, within } from '@testing-library/react'
 import { expect } from 'chai'
 import SidebarDsNav from '../../../../../../frontend/js/features/project-list/components/sidebar/sidebar-ds-nav'
 import {
@@ -44,6 +44,9 @@ describe('<SidebarDsNav />', function () {
     window.metaAttributesCache.set('ol-splitTestVariants', {
       'overleaf-library': 'enabled',
     })
+    window.metaAttributesCache.set('ol-inactiveTutorials', [
+      'library-new-badge',
+    ])
     window.metaAttributesCache.set('ol-userSettings', {})
     window.metaAttributesCache.set('ol-navbar', {
       sessionUser: { email: 'fake@example.com' },
@@ -92,6 +95,46 @@ describe('<SidebarDsNav />', function () {
     ).to.be.null
   })
 
+  describe('library "New" badge', function () {
+    it('shows the badge on the projects page when the tutorial is active', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [])
+
+      await renderSidebar({ activePage: 'projects' })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).getByText('New')).to.exist
+    })
+
+    it('hides the badge once the tutorial has been dismissed', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [
+        'library-new-badge',
+      ])
+
+      await renderSidebar({ activePage: 'projects' })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).queryByText('New')).to.be.null
+    })
+
+    it('hides the badge on the library page itself', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [])
+
+      await renderSidebar({ activePage: 'library' })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).queryByText('New')).to.be.null
+    })
+
+    it('hides the badge in the library trash', async function () {
+      window.metaAttributesCache.set('ol-inactiveTutorials', [])
+
+      await renderSidebar({ activePage: 'library', trashActive: true })
+
+      const link = screen.getByRole('link', { name: /library/i })
+      expect(within(link).queryByText('New')).to.be.null
+    })
+  })
+
   describe('add affiliation widget', function () {
     it('shows the widget on the library page when the user has no affiliations', async function () {
       window.metaAttributesCache.set('ol-userAffiliations', [])