From 629579b8402e1e6fa4e98f39a1c64e272a6d4127 Mon Sep 17 00:00:00 2001
From: Antoine Clausse <antoine.clausse@overleaf.com>
Date: Wed, 11 Dec 2024 14:55:36 +0100
Subject: [PATCH] [web] Update project list page layout and sidebar to new
 design (#22186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PoC DS nav project page shell

* Rename files: use `ds-nav` as a suffix

(really just moving code without changes)

* Update NavBar to the new design

* Small updates to project-list-ds-nav.tsx so it gets its basic shape

* Nest `.survey-notification` and `.project-list-sidebar-survey-wrapper` in the default classes to avoid interferences

* Create `SidebarDsNav`

* Add props to sidebar components so they work in both versions

* Update the SCSS code for the sidebar redesign

* Update subheader to "Organize Tags"

* Mute add affiliation font

* Remove `<aside className="project-list-sidebar-react">` and add sidebar max/min widths

* Fixup buttons padding

* Fix tests: add SplitTestProvider

* Fixup sidebar scroll div: add `flex: 1 1 auto`

* Make "Uncategorized" italic

* Update logo to SVG

* Optimize the svg
https://jakearchibald.github.io/svgomg/
9.12k → 4.92k 53.91%

---------

Co-authored-by: Tim Down <158919+timdown@users.noreply.github.com>
GitOrigin-RevId: 3d08b4b80291d9465fae87ffdf0c6a9f6deda554
---
 .../web/frontend/extracted-translations.json  |   1 +
 .../components/add-affiliation.tsx            |   6 +-
 .../components/project-list-ds-nav.tsx        |  80 ++++++
 .../components/project-list-root.tsx          |   8 +-
 .../components/sidebar/sidebar-ds-nav.tsx     |  52 ++++
 .../components/sidebar/sidebar-filters.tsx    |   7 +-
 .../components/sidebar/tags-list.tsx          |   6 +-
 .../project-list/components/survey-widget.tsx |   8 +-
 .../project-list/components/use-is-ds-nav.ts  |   6 +
 .../bootstrap-5/navbar/default-navbar.tsx     |  24 +-
 .../types/default-navbar-metadata.ts          |   1 +
 .../stylesheets/bootstrap-5/pages/all.scss    |   1 +
 .../pages/project-list-ds-nav.scss            | 254 ++++++++++++++++++
 .../bootstrap-5/pages/project-list.scss       | 102 +++----
 services/web/locales/en.json                  |   1 +
 .../overleaf-a-ds-solution-mallard.svg        |   1 +
 .../helpers/render-with-context.tsx           |   5 +-
 17 files changed, 488 insertions(+), 75 deletions(-)
 create mode 100644 services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
 create mode 100644 services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
 create mode 100644 services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts
 create mode 100644 services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
 create mode 100644 services/web/public/img/ol-brand/overleaf-a-ds-solution-mallard.svg

diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json
index 85d472ed56..54047c26ea 100644
--- a/services/web/frontend/extracted-translations.json
+++ b/services/web/frontend/extracted-translations.json
@@ -1040,6 +1040,7 @@
   "or": "",
   "organization_name": "",
   "organize_projects": "",
+  "organize_tags": "",
   "other": "",
   "other_logs_and_files": "",
   "other_output_files": "",
diff --git a/services/web/frontend/js/features/project-list/components/add-affiliation.tsx b/services/web/frontend/js/features/project-list/components/add-affiliation.tsx
index de4a130bfc..0a60301b1a 100644
--- a/services/web/frontend/js/features/project-list/components/add-affiliation.tsx
+++ b/services/web/frontend/js/features/project-list/components/add-affiliation.tsx
@@ -3,6 +3,7 @@ import { useProjectListContext } from '../context/project-list-context'
 import getMeta from '../../../utils/meta'
 import classNames from 'classnames'
 import OLButton from '@/features/ui/components/ol/ol-button'
+import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
 
 export function useAddAffiliation() {
   const { totalProjectsCount } = useProjectListContext()
@@ -21,6 +22,7 @@ type AddAffiliationProps = {
 function AddAffiliation({ className }: AddAffiliationProps) {
   const { t } = useTranslation()
   const { show } = useAddAffiliation()
+  const isDsNav = useIsDsNav()
 
   if (!show) {
     return null
@@ -30,7 +32,9 @@ function AddAffiliation({ className }: AddAffiliationProps) {
 
   return (
     <div className={classes}>
-      <p>{t('are_you_affiliated_with_an_institution')}</p>
+      <p className={isDsNav ? 'text-muted' : undefined}>
+        {t('are_you_affiliated_with_an_institution')}
+      </p>
       <OLButton variant="secondary" href="/user/settings">
         {t('add_affiliation')}
       </OLButton>
diff --git a/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
new file mode 100644
index 0000000000..ccc7bf1c69
--- /dev/null
+++ b/services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx
@@ -0,0 +1,80 @@
+import getMeta from '@/utils/meta'
+import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
+import FatFooter from '@/features/ui/components/bootstrap-5/footer/fat-footer'
+import NewProjectButton from '@/features/project-list/components/new-project-button'
+import CurrentPlanWidget from '@/features/project-list/components/current-plan-widget/current-plan-widget'
+import ProjectTools from '@/features/project-list/components/table/project-tools/project-tools'
+import { useProjectListContext } from '@/features/project-list/context/project-list-context'
+import SearchForm from '@/features/project-list/components/search-form'
+import { TableContainer } from '@/features/ui/components/bootstrap-5/table'
+import ProjectListTable from '@/features/project-list/components/table/project-list-table'
+import SidebarDsNav from '@/features/project-list/components/sidebar/sidebar-ds-nav'
+
+export function ProjectListDsNav() {
+  const navbarProps = getMeta('ol-navbar')
+  const footerProps = getMeta('ol-footer')
+  const {
+    searchText,
+    setSearchText,
+    selectedProjects,
+    filter,
+    tags,
+    selectedTagId,
+  } = useProjectListContext()
+
+  const selectedTag = tags.find(tag => tag._id === selectedTagId)
+
+  const tableTopArea = (
+    <div className="pt-2 pb-3 d-md-none d-flex gap-2">
+      <NewProjectButton
+        id="new-project-button-projects-table"
+        showAddAffiliationWidget
+      />
+      <SearchForm
+        inputValue={searchText}
+        setInputValue={setSearchText}
+        filter={filter}
+        selectedTag={selectedTag}
+        className="overflow-hidden flex-grow-1"
+      />
+    </div>
+  )
+
+  return (
+    <div className="project-ds-nav-page website-redesign">
+      <DefaultNavbar
+        {...navbarProps}
+        items={navbarProps.items.filter(item => item.text !== 'help')}
+        customLogo="/img/ol-brand/overleaf-a-ds-solution-mallard.svg"
+        showAccountButtons={false}
+      />
+      <main className="project-ds-nav-sidebar-and-content">
+        <SidebarDsNav />
+        <div className="project-ds-nav-content">
+          <div>Notifications and search and stuff</div>
+          <div className="project-ds-nav-project-list">
+            {selectedProjects.length === 0 ? (
+              <CurrentPlanWidget />
+            ) : (
+              <ProjectTools />
+            )}
+
+            <SearchForm
+              inputValue={searchText}
+              setInputValue={setSearchText}
+              filter={filter}
+              selectedTag={selectedTag}
+              className="overflow-hidden flex-grow-1"
+            />
+
+            <TableContainer bordered>
+              {tableTopArea}
+              <ProjectListTable />
+            </TableContainer>
+          </div>
+          <FatFooter {...footerProps} />
+        </div>
+      </main>
+    </div>
+  )
+}
diff --git a/services/web/frontend/js/features/project-list/components/project-list-root.tsx b/services/web/frontend/js/features/project-list/components/project-list-root.tsx
index 197662e03f..90b4191674 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-root.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-root.tsx
@@ -20,6 +20,7 @@ import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-n
 import FatFooter from '@/features/ui/components/bootstrap-5/footer/fat-footer'
 import WelcomePageContent from '@/features/project-list/components/welcome-page-content'
 import ProjectListDefault from '@/features/project-list/components/project-list-default'
+import { ProjectListDsNav } from '@/features/project-list/components/project-list-ds-nav'
 
 function ProjectListRoot() {
   const { isReady } = useWaitForI18n()
@@ -108,12 +109,7 @@ function ProjectListPageContent() {
       </DefaultPageContentWrapper>
     )
   } else if (hasDsNav) {
-    return (
-      <>
-        <div>Header with cut-down nav</div>
-        <div>Project list with DS nav and footer</div>
-      </>
-    )
+    return <ProjectListDsNav />
   } else {
     return (
       <DefaultPageContentWrapper>
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
new file mode 100644
index 0000000000..5c0e7f65ab
--- /dev/null
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx
@@ -0,0 +1,52 @@
+import NewProjectButton from '../new-project-button'
+import SidebarFilters from './sidebar-filters'
+import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
+import SurveyWidget from '../survey-widget'
+import { usePersistedResize } from '../../../../shared/hooks/use-resize'
+
+function SidebarDsNav() {
+  const { show: showAddAffiliationWidget } = useAddAffiliation()
+  const { mousePos, getHandleProps, getTargetProps } = usePersistedResize({
+    name: 'project-sidebar',
+  })
+
+  return (
+    <div
+      className="project-ds-nav-sidebar d-none d-md-flex"
+      {...getTargetProps({
+        style: {
+          ...(mousePos?.x && { flexBasis: `${mousePos.x}px` }),
+        },
+      })}
+    >
+      <NewProjectButton id="new-project-button-sidebar" />
+      <div className="project-list-sidebar-scroll">
+        <SidebarFilters withHr />
+        {showAddAffiliationWidget && <hr />}
+        <AddAffiliation />
+      </div>
+      <div className="project-list-sidebar-survey-wrapper">
+        <SurveyWidget variant="light" />
+      </div>
+      <div className="bg-warning">
+        Help / Profile
+        <br />
+        DS Nav
+      </div>
+      <div
+        {...getHandleProps({
+          style: {
+            position: 'absolute',
+            zIndex: 1,
+            top: 0,
+            right: '-2px',
+            height: '100%',
+            width: '4px',
+          },
+        })}
+      />
+    </div>
+  )
+}
+
+export default SidebarDsNav
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx
index 325456f6cb..ec0184396b 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/sidebar-filters.tsx
@@ -27,7 +27,7 @@ export function SidebarFilter({ filter, text }: SidebarFilterProps) {
   )
 }
 
-export default function SidebarFilters() {
+export default function SidebarFilters({ withHr }: { withHr?: boolean }) {
   const { t } = useTranslation()
 
   return (
@@ -37,6 +37,11 @@ export default function SidebarFilters() {
       <SidebarFilter filter="shared" text={t('shared_with_you')} />
       <SidebarFilter filter="archived" text={t('archived_projects')} />
       <SidebarFilter filter="trashed" text={t('trashed_projects')} />
+      {withHr && (
+        <li role="none">
+          <hr />
+        </li>
+      )}
       <TagsList />
     </ul>
   )
diff --git a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
index a6cc8e94c9..bb626b87c9 100644
--- a/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
+++ b/services/web/frontend/js/features/project-list/components/sidebar/tags-list.tsx
@@ -13,6 +13,7 @@ import {
   DropdownMenu,
   DropdownToggle,
 } from '@/features/ui/components/bootstrap-5/dropdown-menu'
+import { useIsDsNav } from '@/features/project-list/components/use-is-ds-nav'
 
 export default function TagsList() {
   const { t } = useTranslation()
@@ -33,6 +34,7 @@ export default function TagsList() {
     DeleteTagModal,
   } = useTag()
 
+  const isDsNav = useIsDsNav()
   return (
     <>
       <li
@@ -40,7 +42,7 @@ export default function TagsList() {
         aria-hidden="true"
         data-testid="organize-projects"
       >
-        {t('organize_projects')}
+        {isDsNav ? t('organize_tags') : t('organize_projects')}
       </li>
       <li className="tag">
         <button type="button" className="tag-name" onClick={openCreateTagModal}>
@@ -113,7 +115,7 @@ export default function TagsList() {
             className="tag-name"
             onClick={() => selectTag(UNCATEGORIZED_KEY)}
           >
-            <span className="name">
+            <span className="name fst-italic">
               {t('uncategorized')}{' '}
               <span className="subdued">({untaggedProjectsCount})</span>
             </span>
diff --git a/services/web/frontend/js/features/project-list/components/survey-widget.tsx b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
index ae0847ef92..c7fa529133 100644
--- a/services/web/frontend/js/features/project-list/components/survey-widget.tsx
+++ b/services/web/frontend/js/features/project-list/components/survey-widget.tsx
@@ -3,7 +3,11 @@ import getMeta from '../../../utils/meta'
 import { useCallback } from 'react'
 import Close from '@/shared/components/close'
 
-export default function SurveyWidget() {
+export default function SurveyWidget({
+  variant = 'dark',
+}: {
+  variant?: 'light' | 'dark'
+}) {
   const survey = getMeta('ol-survey')
   const [dismissedSurvey, setDismissedSurvey] = usePersistedState(
     `dismissed-${survey?.name}`,
@@ -34,7 +38,7 @@ export default function SurveyWidget() {
             </a>
           </div>
           <div className="notification-close notification-close-button-style">
-            <Close variant="dark" onDismiss={() => dismissSurvey()} />
+            <Close variant={variant} onDismiss={() => dismissSurvey()} />
           </div>
         </div>
       </div>
diff --git a/services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts b/services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts
new file mode 100644
index 0000000000..0d44c46a08
--- /dev/null
+++ b/services/web/frontend/js/features/project-list/components/use-is-ds-nav.ts
@@ -0,0 +1,6 @@
+import { useSplitTestContext } from '@/shared/context/split-test-context'
+
+export const useIsDsNav = () => {
+  const { splitTestVariants } = useSplitTestContext()
+  return splitTestVariants['sidebar-navigation-ui-update'] === 'active'
+}
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx
index 45625be250..d0f2ee8b9c 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/navbar/default-navbar.tsx
@@ -23,6 +23,7 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
     enableUpgradeButton,
     suppressNavbarRight,
     suppressNavContentLinks,
+    showAccountButtons = true,
     showSubscriptionLink,
     showSignUpLink,
     currentUrl,
@@ -110,17 +111,18 @@ function DefaultNavbar(props: DefaultNavbarMetadata) {
                       />
                     ) : null
                   })}
-                  {sessionUser ? (
-                    <LoggedInItems
-                      sessionUser={sessionUser}
-                      showSubscriptionLink={showSubscriptionLink}
-                    />
-                  ) : (
-                    <LoggedOutItems
-                      showSignUpLink={showSignUpLink}
-                      currentUrl={currentUrl}
-                    />
-                  )}
+                  {showAccountButtons &&
+                    (sessionUser ? (
+                      <LoggedInItems
+                        sessionUser={sessionUser}
+                        showSubscriptionLink={showSubscriptionLink}
+                      />
+                    ) : (
+                      <LoggedOutItems
+                        showSignUpLink={showSignUpLink}
+                        currentUrl={currentUrl}
+                      />
+                    ))}
                 </Nav>
               </Navbar.Collapse>
             </>
diff --git a/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts b/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts
index 4bba1baf1c..b1d05cc771 100644
--- a/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts
+++ b/services/web/frontend/js/features/ui/components/types/default-navbar-metadata.ts
@@ -13,6 +13,7 @@ export type DefaultNavbarMetadata = {
   enableUpgradeButton: boolean
   suppressNavbarRight: boolean
   suppressNavContentLinks: boolean
+  showAccountButtons?: boolean
   showSubscriptionLink: boolean
   showSignUpLink: boolean
   currentUrl: string
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
index 3c87c6f165..4337d95d14 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -2,6 +2,7 @@
 @import 'cms';
 @import 'content';
 @import 'project-list';
+@import 'project-list-ds-nav';
 @import 'sidebar-v2-dash-pane';
 @import 'editor/ide';
 @import 'editor/toolbar';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
new file mode 100644
index 0000000000..defbf29098
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss
@@ -0,0 +1,254 @@
+.project-ds-nav-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  height: 100dvh;
+  color: var(--content-secondary);
+
+  .navbar-default {
+    position: relative;
+  }
+
+  .project-ds-nav-sidebar-and-content {
+    flex-grow: 1;
+    display: flex;
+    overflow-y: hidden;
+
+    .project-ds-nav-sidebar {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 15%;
+      max-width: 320px;
+      min-width: 200px;
+      padding: var(--spacing-08) var(--spacing-08) 0 var(--spacing-05);
+
+      .project-list-sidebar-scroll {
+        flex: 1 1 auto;
+        overflow: auto;
+        margin: 0 calc(var(--spacing-07) * -1);
+        padding: 0 var(--spacing-07);
+      }
+
+      .new-project-button {
+        margin-bottom: var(--spacing-08);
+
+        &::after {
+          display: none;
+        }
+      }
+
+      .dropdown {
+        width: 100%;
+
+        .new-project-button {
+          width: 100%;
+        }
+      }
+    }
+
+    ul.project-list-filters {
+      .subdued {
+        color: var(--content-disabled);
+      }
+
+      hr {
+        margin: var(--spacing-05) 0;
+      }
+
+      > li {
+        position: relative;
+
+        > button {
+          width: 100%;
+          text-align: left;
+          color: var(--content-secondary);
+          background: none;
+          border-radius: var(--border-radius-medium);
+          border: none;
+          padding: var(--spacing-04) var(--spacing-05);
+
+          &:hover {
+            background-color: var(--bg-light-secondary);
+          }
+        }
+
+        &.active {
+          button {
+            background-color: var(--bg-accent-03);
+            color: var(--green-60);
+            font-weight: bold;
+          }
+        }
+      }
+
+      .dropdown-header {
+        @include body-sm;
+
+        padding: var(--spacing-05) var(--spacing-06);
+        text-transform: uppercase;
+        font-weight: bold;
+      }
+
+      > li.tag {
+        &:hover {
+          .tag-menu {
+            display: block;
+          }
+        }
+
+        button.tag-name {
+          position: relative;
+          padding-right: var(--spacing-08);
+          display: flex;
+          align-items: center;
+          word-wrap: anywhere;
+
+          .tag-list-icon {
+            vertical-align: sub;
+            font-weight: bold;
+          }
+
+          span.name {
+            padding-left: 0.5em;
+            line-height: 1.4;
+          }
+        }
+      }
+
+      .tag-menu {
+        &.show {
+          display: block;
+        }
+
+        button.dropdown-toggle {
+          border: 1px solid var(--content-secondary);
+          border-radius: var(--border-radius-base);
+          background-color: transparent;
+          color: var(--content-secondary);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 16px;
+          height: 16px;
+          position: relative;
+          padding: var(--spacing-01) var(--spacing-03);
+
+          &::after {
+            margin: 0;
+          }
+        }
+
+        display: none;
+        width: auto;
+        position: absolute;
+        top: 50%;
+        margin-top: -8px; // Half the element height.
+        right: 4px;
+
+        &.open {
+          display: block;
+        }
+
+        button.tag-action {
+          border-radius: unset;
+          width: 100%;
+          background-color: transparent;
+          border-color: transparent;
+          color: var(--neutral-70);
+          text-align: left;
+          font-weight: normal;
+
+          &:active {
+            outline: none;
+          }
+        }
+      }
+    }
+
+    .project-ds-nav-content {
+      flex-grow: 1;
+      overflow-y: auto;
+      position: relative;
+      background-color: var(--bg-light-secondary);
+      padding: var(--spacing-08);
+
+      @media (width >= 768px) {
+        border-top-left-radius: var(--border-radius-large);
+      }
+    }
+  }
+
+  .fat-footer-container {
+    width: 100% !important;
+  }
+}
+
+.add-affiliation {
+  .progress {
+    height: var(--spacing-05);
+    margin-bottom: var(--spacing-03);
+  }
+
+  p {
+    margin-bottom: var(--spacing-03);
+  }
+
+  &.is-mobile p {
+    @include body-xs;
+
+    white-space: normal;
+  }
+}
+
+.survey-notification {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacing-06);
+  background-color: var(--bg-light-secondary);
+  border-color: transparent;
+  color: var(--content-secondary);
+  border-radius: var(--border-radius-base);
+
+  @include media-breakpoint-up(md) {
+    flex-wrap: nowrap;
+  }
+
+  button.close {
+    padding: 0;
+  }
+}
+
+.project-list-sidebar-survey-wrapper {
+  margin-top: var(--spacing-05);
+
+  .survey-notification {
+    font-size: var(--font-size-02);
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .project-list-sidebar-survey-link {
+    color: var(--content-secondary) !important;
+  }
+
+  @include media-breakpoint-down(md) {
+    position: static;
+    margin-top: var(--spacing-05);
+
+    .survey-notification {
+      font-size: unset;
+
+      .project-list-sidebar-survey-link {
+        display: block;
+        align-items: center;
+        min-width: 48px;
+        min-height: 48px;
+        padding-top: var(--spacing-07);
+        color: var(--content-secondary) !important;
+      }
+    }
+  }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
index 909bd5c687..f8fc4a2deb 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
@@ -682,6 +682,57 @@
       margin: 0 auto;
     }
   }
+
+  .survey-notification {
+    display: flex;
+    flex-wrap: wrap;
+    padding: var(--spacing-06);
+    background-color: var(--bg-dark-tertiary);
+    border-color: transparent;
+    color: var(--neutral-20);
+    box-shadow: 2px 4px 6px rgb(0 0 0 / 25%);
+    border-radius: var(--border-radius-base);
+
+    @include media-breakpoint-up(md) {
+      flex-wrap: nowrap;
+    }
+
+    button.close {
+      @extend .text-white;
+
+      padding: 0;
+    }
+  }
+
+  .project-list-sidebar-survey-wrapper {
+    position: sticky;
+    bottom: 0;
+
+    .survey-notification {
+      font-size: var(--font-size-02);
+
+      a {
+        text-decoration: none;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      position: static;
+      margin-top: var(--spacing-05);
+
+      .survey-notification {
+        font-size: unset;
+
+        .project-list-sidebar-survey-link {
+          display: block;
+          align-items: center;
+          min-width: 48px;
+          min-height: 48px;
+          padding-top: var(--spacing-07);
+        }
+      }
+    }
+  }
 }
 
 .current-plan {
@@ -714,57 +765,6 @@
   }
 }
 
-.survey-notification {
-  display: flex;
-  flex-wrap: wrap;
-  padding: var(--spacing-06);
-  background-color: var(--bg-dark-tertiary);
-  border-color: transparent;
-  color: var(--neutral-20);
-  box-shadow: 2px 4px 6px rgb(0 0 0 / 25%);
-  border-radius: var(--border-radius-base);
-
-  @include media-breakpoint-up(md) {
-    flex-wrap: nowrap;
-  }
-
-  button.close {
-    @extend .text-white;
-
-    padding: 0;
-  }
-}
-
-.project-list-sidebar-survey-wrapper {
-  position: sticky;
-  bottom: 0;
-
-  .survey-notification {
-    font-size: var(--font-size-02);
-
-    a {
-      text-decoration: none;
-    }
-  }
-
-  @include media-breakpoint-down(md) {
-    position: static;
-    margin-top: var(--spacing-05);
-
-    .survey-notification {
-      font-size: unset;
-
-      .project-list-sidebar-survey-link {
-        display: block;
-        align-items: center;
-        min-width: 48px;
-        min-height: 48px;
-        padding-top: var(--spacing-07);
-      }
-    }
-  }
-}
-
 .project-list-load-more-button {
   margin-bottom: var(--spacing-05);
 }
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index bc2ed19165..c808a05dc4 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -1474,6 +1474,7 @@
   "organization_or_company_name": "Organization or company name",
   "organization_or_company_type": "Organization or company type",
   "organize_projects": "Organize Projects",
+  "organize_tags": "Organize Tags",
   "original_price": "Original price",
   "other": "Other",
   "other_actions": "Other Actions",
diff --git a/services/web/public/img/ol-brand/overleaf-a-ds-solution-mallard.svg b/services/web/public/img/ol-brand/overleaf-a-ds-solution-mallard.svg
new file mode 100644
index 0000000000..a0e156545f
--- /dev/null
+++ b/services/web/public/img/ol-brand/overleaf-a-ds-solution-mallard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="425" height="192" fill="none"><g clip-path="url(#a)"><path fill="#1D1D1B" d="m27.16 182.86-3.03-7.72H14.4l-2.98 7.72H8.57l9.6-24.37h2.38l9.54 24.37h-2.93Zm-3.9-10.25-2.82-7.53a40.3 40.3 0 0 1-1.12-3.5c-.24 1.07-.6 2.22-1.05 3.5l-2.85 7.53h7.85ZM62.08 170.52c0 4-1.12 7.06-3.4 9.17-2.27 2.12-5.56 3.2-9.85 3.2h-6.87v-24.27h7.6c3.98 0 7.04 1.05 9.23 3.14 2.2 2.1 3.3 5.02 3.3 8.76Zm-5.33.13c0-5.2-2.3-7.82-6.9-7.82h-2.74v15.8h2.2c4.96 0 7.42-2.67 7.42-7.98h.02ZM66.5 159.51c0-1.64.92-2.48 2.75-2.48s2.74.84 2.74 2.48c0 .79-.23 1.39-.68 1.83-.47.45-1.15.66-2.06.66-1.83 0-2.75-.84-2.75-2.49Zm5.28 23.35h-5.07V164.3h5.07v18.56ZM93.24 164.32v2.56l-2.9.76c.53.84.79 1.75.79 2.8 0 1.99-.7 3.55-2.1 4.65-1.38 1.13-3.31 1.67-5.77 1.67l-.92-.05-.75-.08c-.53.4-.79.84-.79 1.34 0 .73.94 1.1 2.8 1.1h3.16c2.04 0 3.58.44 4.66 1.3 1.07.87 1.59 2.17 1.59 3.84 0 2.17-.92 3.85-2.72 5.05-1.8 1.2-4.4 1.8-7.79 1.8-2.59 0-4.57-.44-5.93-1.35a4.32 4.32 0 0 1-2.04-3.8c0-1.12.34-2.06 1.04-2.8a6.1 6.1 0 0 1 3.06-1.61c-.52-.21-.97-.58-1.36-1.1a2.7 2.7 0 0 1 .03-3.37c.42-.47 1-.94 1.78-1.39a5.1 5.1 0 0 1-2.33-2.01 6.06 6.06 0 0 1-.86-3.3c0-2 .65-3.58 1.98-4.7 1.31-1.1 3.2-1.65 5.65-1.65.52 0 1.12.06 1.86.13.7.1 1.17.16 1.36.21h6.5ZM78.92 185.5c0 .7.34 1.25 1 1.64.67.4 1.61.6 2.82.6 1.8 0 3.24-.23 4.26-.75 1.02-.53 1.54-1.18 1.54-2.04 0-.7-.31-1.18-.92-1.44-.6-.26-1.54-.4-2.82-.4H82.2c-.94 0-1.7.22-2.33.66a2.03 2.03 0 0 0-.94 1.73Zm1.83-15.11c0 .99.23 1.8.68 2.38.47.57 1.15.88 2.09.88s1.65-.28 2.1-.88c.44-.58.65-1.39.65-2.38 0-2.25-.92-3.35-2.75-3.35s-2.8 1.13-2.8 3.35h.03ZM96.07 159.51c0-1.64.91-2.48 2.74-2.48s2.75.84 2.75 2.48c0 .79-.24 1.39-.68 1.83-.47.45-1.15.66-2.07.66-1.83 0-2.74-.84-2.74-2.49Zm5.28 23.35h-5.07V164.3h5.07v18.56ZM114.47 179.17c.89 0 1.94-.18 3.2-.57v3.76c-1.26.57-2.83.84-4.66.84-2.02 0-3.5-.53-4.42-1.55-.92-1.02-1.39-2.56-1.39-4.6v-8.94h-2.43v-2.14l2.8-1.7 1.46-3.92h3.25v3.95h5.2v3.79h-5.2v8.94c0 .7.2 1.25.6 1.6.42.33.94.51 1.6.51v.03ZM133.19 182.86l-1-2.51h-.13a7.23 7.23 0 0 1-2.64 2.22c-.88.42-2.06.63-3.52.63a5.8 5.8 0 0 1-4.21-1.52c-1.02-1.02-1.55-2.46-1.55-4.34 0-1.96.68-3.42 2.07-4.37 1.39-.94 3.45-1.46 6.22-1.54l3.22-.1v-.81c0-1.89-.97-2.83-2.88-2.83-1.49 0-3.22.45-5.23 1.34l-1.67-3.43a15.02 15.02 0 0 1 7.11-1.67c2.61 0 4.4.55 5.72 1.62 1.34 1.1 2 2.75 2 4.94v12.37h-3.54.03Zm-1.5-8.58-1.95.08a6.62 6.62 0 0 0-3.3.78c-.73.5-1.07 1.23-1.07 2.23 0 1.43.81 2.14 2.46 2.14a3.9 3.9 0 0 0 2.82-1.02 3.55 3.55 0 0 0 1.05-2.7v-1.5ZM147 182.86h-5.08v-25.83h5.07v25.83ZM175.85 176.14c0 2.2-.78 3.92-2.35 5.17-1.57 1.26-3.77 1.89-6.59 1.89-2.59 0-4.89-.5-6.88-1.47v-4.78c1.65.73 3.04 1.25 4.16 1.54 1.13.29 2.17.44 3.11.44a4.3 4.3 0 0 0 2.59-.65c.6-.44.92-1.07.92-1.93 0-.47-.14-.9-.4-1.28-.26-.4-.65-.74-1.17-1.08-.53-.34-1.57-.89-3.14-1.64a15.1 15.1 0 0 1-3.35-2.01 7.79 7.79 0 0 1-1.77-2.25 6.42 6.42 0 0 1-.66-2.98c0-2.15.74-3.85 2.17-5.08 1.44-1.22 3.48-1.85 6.04-1.85 1.26 0 2.46.16 3.6.44 1.16.3 2.36.7 3.59 1.26l-1.65 4c-1.3-.53-2.35-.9-3.21-1.1-.84-.2-1.68-.31-2.51-.31a3.4 3.4 0 0 0-2.25.68 2.23 2.23 0 0 0-.78 1.77c0 .45.1.87.3 1.18.22.34.56.65 1 1 .45.3 1.54.88 3.27 1.7 2.27 1.06 3.82 2.16 4.65 3.26a6.4 6.4 0 0 1 1.26 4l.05.08ZM187.38 183.2c-5.78 0-8.65-3.17-8.65-9.52 0-3.16.78-5.57 2.35-7.21 1.57-1.68 3.81-2.51 6.74-2.51 2.15 0 4.08.41 5.78 1.25l-1.49 3.92a28.7 28.7 0 0 0-2.22-.78 6.95 6.95 0 0 0-2.07-.32c-2.64 0-3.94 1.89-3.94 5.62 0 3.74 1.3 5.44 3.94 5.44.97 0 1.89-.13 2.72-.39a10 10 0 0 0 2.49-1.23v4.34c-.81.52-1.65.89-2.49 1.07a15 15 0 0 1-3.16.29v.03ZM197.1 159.51c0-1.64.92-2.48 2.75-2.48s2.74.84 2.74 2.48c0 .79-.23 1.39-.68 1.83-.47.45-1.15.66-2.06.66-1.83 0-2.75-.84-2.75-2.49Zm5.28 23.35h-5.07V164.3h5.07v18.56ZM216.08 183.2c-2.98 0-5.33-.84-7-2.49-1.68-1.64-2.51-3.97-2.51-7 0-3.04.78-5.52 2.32-7.22 1.55-1.7 3.72-2.53 6.46-2.53 2.74 0 4.65.75 6.12 2.24 1.46 1.5 2.2 3.56 2.2 6.2v2.46h-11.98a4.8 4.8 0 0 0 1.28 3.37c.78.81 1.9 1.2 3.35 1.2a13.67 13.67 0 0 0 6.27-1.46v3.92c-.89.44-1.83.78-2.82 1-1.02.2-2.25.3-3.69.3Zm-.7-15.64c-1.08 0-1.91.34-2.51 1.02-.6.68-.97 1.65-1.05 2.9h7.11c0-1.25-.34-2.22-1-2.9a3.33 3.33 0 0 0-2.56-1.02ZM244.89 182.86h-5.07V172c0-1.34-.24-2.35-.7-3-.48-.69-1.24-1-2.28-1-1.41 0-2.43.47-3.06 1.41-.63.94-.94 2.5-.94 4.7v8.74h-5.07V164.3h3.86l.69 2.38h.28a5.52 5.52 0 0 1 2.33-2.04c1-.47 2.12-.68 3.37-.68 2.17 0 3.8.57 4.92 1.75 1.12 1.17 1.67 2.85 1.67 5.04v12.1ZM257.64 183.2c-5.77 0-8.65-3.17-8.65-9.52 0-3.16.79-5.57 2.35-7.21 1.57-1.68 3.82-2.51 6.75-2.51 2.14 0 4.08.41 5.78 1.25l-1.5 3.92a28.7 28.7 0 0 0-2.22-.78 6.95 6.95 0 0 0-2.06-.32c-2.64 0-3.95 1.89-3.95 5.62 0 3.74 1.31 5.44 3.95 5.44.97 0 1.88-.13 2.72-.39a10 10 0 0 0 2.48-1.23v4.34c-.8.52-1.65.89-2.48 1.07-.84.19-1.88.29-3.17.29v.03ZM275.97 183.2c-2.98 0-5.33-.84-7-2.49-1.68-1.64-2.52-3.97-2.52-7 0-3.04.79-5.52 2.33-7.22 1.54-1.7 3.71-2.53 6.46-2.53 2.74 0 4.65.75 6.12 2.24 1.46 1.5 2.2 3.56 2.2 6.2v2.46h-11.98a4.81 4.81 0 0 0 1.28 3.37c.78.81 1.9 1.2 3.35 1.2a13.67 13.67 0 0 0 6.27-1.46v3.92c-.89.44-1.83.78-2.85 1-1 .2-2.22.3-3.69.3h.03Zm-.7-15.64c-1.08 0-1.91.34-2.51 1.02-.6.68-.97 1.65-1.05 2.9h7.11c0-1.25-.34-2.22-.97-2.9a3.33 3.33 0 0 0-2.56-1.02h-.03ZM310.87 176.43c0 2.14-.79 3.79-2.33 4.99-1.54 1.2-3.66 1.8-6.3 1.8-2.87 0-5.1-.36-6.64-1.12v-2.72a17.38 17.38 0 0 0 6.72 1.36c1.88 0 3.3-.37 4.24-1.07.94-.7 1.43-1.7 1.43-2.98 0-.84-.15-1.52-.5-2.07a4.63 4.63 0 0 0-1.7-1.49c-.78-.44-1.98-.97-3.6-1.54-2.25-.81-3.87-1.75-4.84-2.88a6.35 6.35 0 0 1-1.43-4.34c0-1.88.7-3.34 2.11-4.47 1.42-1.1 3.27-1.64 5.57-1.64 2.3 0 4.63.44 6.67 1.33l-.9 2.46a15.11 15.11 0 0 0-5.82-1.26c-1.5 0-2.67.32-3.5.97a3.2 3.2 0 0 0-1.26 2.67c0 .83.16 1.51.47 2.06.32.55.84 1.02 1.57 1.5.73.44 1.86.93 3.37 1.48 2.54.92 4.29 1.88 5.26 2.93a5.7 5.7 0 0 1 1.44 4.05l-.03-.02ZM331.1 173.76c0 2.95-.76 5.28-2.25 6.95-1.49 1.68-3.55 2.51-6.2 2.51-1.61 0-3.05-.39-4.33-1.15a7.35 7.35 0 0 1-2.93-3.3 11.54 11.54 0 0 1-1.02-5.01c0-2.95.73-5.28 2.22-6.93 1.5-1.65 3.53-2.48 6.17-2.48s4.58.84 6.07 2.53c1.49 1.7 2.25 3.98 2.25 6.88h.02Zm-13.85 0c0 2.33.47 4.1 1.38 5.3.94 1.23 2.3 1.84 4.1 1.84 1.81 0 3.17-.6 4.11-1.8.94-1.21 1.41-2.99 1.41-5.34 0-2.35-.47-4.08-1.4-5.25-.95-1.2-2.34-1.8-4.14-1.8-1.8 0-3.16.6-4.08 1.77-.91 1.18-1.38 2.95-1.38 5.28ZM338.68 182.86h-2.74v-25.83h2.74v25.83ZM347.13 164.69v11.79c0 1.49.34 2.59 1.02 3.32.68.73 1.72 1.1 3.16 1.1 1.9 0 3.3-.53 4.18-1.57.89-1.05 1.3-2.75 1.3-5.1v-9.57h2.75v18.2h-2.27l-.4-2.44h-.15a5.48 5.48 0 0 1-2.35 2.07c-1 .47-2.15.7-3.43.7-2.22 0-3.87-.52-4.96-1.56-1.1-1.05-1.65-2.72-1.65-5.05v-11.9h2.8ZM371.25 180.92a8.1 8.1 0 0 0 2.49-.34v2.12c-.29.13-.73.26-1.3.37-.58.1-1.1.13-1.58.13-3.53 0-5.28-1.86-5.28-5.57V166.8h-2.61v-1.34l2.61-1.15 1.15-3.9h1.6v4.22h5.28v2.14h-5.28v10.7c0 1.09.26 1.93.78 2.5.52.58 1.23.89 2.14.89v.05ZM377.14 159.75c0-.63.15-1.1.47-1.39.31-.29.7-.44 1.15-.44.44 0 .83.15 1.15.44.31.29.47.76.47 1.39 0 .63-.16 1.07-.47 1.38-.32.32-.7.45-1.15.45-.47 0-.87-.16-1.15-.45-.32-.31-.47-.75-.47-1.38Zm3 23.1h-2.74v-18.19h2.74v18.2ZM401.68 173.76c0 2.95-.76 5.28-2.25 6.95-1.49 1.68-3.55 2.51-6.2 2.51-1.61 0-3.05-.39-4.33-1.15a7.5 7.5 0 0 1-2.93-3.3 11.54 11.54 0 0 1-1.02-5.01c0-2.95.73-5.28 2.22-6.93 1.5-1.65 3.53-2.48 6.17-2.48s4.58.84 6.07 2.53c1.49 1.7 2.25 3.98 2.25 6.88h.02Zm-13.85 0c0 2.33.47 4.1 1.38 5.3.94 1.23 2.3 1.84 4.1 1.84 1.81 0 3.17-.6 4.11-1.8.94-1.21 1.41-2.99 1.41-5.34 0-2.35-.47-4.08-1.4-5.25-.95-1.2-2.33-1.8-4.14-1.8-1.8 0-3.16.6-4.08 1.77-.91 1.18-1.38 2.95-1.38 5.28ZM418.94 182.86v-11.77c0-1.49-.34-2.59-1.02-3.32-.68-.73-1.73-1.1-3.17-1.1-1.9 0-3.3.53-4.18 1.55-.89 1.02-1.33 2.72-1.33 5.1v9.54h-2.75v-18.2h2.25l.44 2.49h.13a5.81 5.81 0 0 1 2.38-2.1 7.62 7.62 0 0 1 3.4-.73c2.2 0 3.85.53 4.94 1.6 1.1 1.04 1.65 2.74 1.65 5.07v11.87h-2.75Z"/><path fill="#046530" d="M106 3.74c-4.89 4.08-8.52 8.96-12.2 13.75a202.61 202.61 0 0 1-5.1 6.4c-3.25 3.85-6.8 7.32-11.3 9.7a26.56 26.56 0 0 1-14.35 2.96 48.22 48.22 0 0 1-13.15-2.96c-.31-.1-.62-.26-1.07-.44 12.03-8.81 25.23-15.27 38.2-22.22-.14 0-.3-.06-.4 0-16.02 4.2-31.24 10.3-45.01 19.68-8.16 5.57-15.35 12.16-20.81 20.5a49.9 49.9 0 0 0-7.71 20.02c-2.3 15.08 6.35 28.57 16.44 33.96 16.91 9.04 37.77-1.02 41.25-19.92 2.82-15.37-7.35-30.27-22.74-32.94-9.8-1.7-18.25 1.36-25.3 8.34-.22.2-.4.47-.58.7-.08-.05-.16-.1-.24-.18.76-1.38 1.5-2.8 2.3-4.15a68.15 68.15 0 0 1 16.34-18.17 7.44 7.44 0 0 1 5.83-1.6c13.9 1.73 25 8.1 32.68 19.95a41.43 41.43 0 0 1 6.64 25.22A42.7 42.7 0 0 1 51 122.16 42.73 42.73 0 0 1 1.05 89.14c-2.38-11.16-.47-21.83 4.44-32 5.2-10.71 13.04-19.1 22.93-25.67.52-.34.88-.65.88-1.38.16-8.13 3.53-14.7 9.96-19.69 5-3.9 10.75-6.17 16.81-7.7C65.01.4 74.17-.3 83.4.1c6.1.27 12.13.9 18.06 2.33 1.47.37 2.88.81 4.55 1.3ZM375.23 59.5c0-.34.08-.66.08-1v-4.99c0-.65.18-.94.91-.94 3.8.03 7.6 0 11.4 0 .6 0 .89.18.8.81V109.97c0 .84-.4 1.26-1.22 1.26-3.58 0-7.16-.03-10.74 0-.9 0-1.13-.29-1.1-1.12.05-1.63 0-3.27 0-4.9 0-.28-.03-.6-.05-.88l-.26-.18c-.06.15-.08.3-.16.44-2.4 4-6.01 6.35-10.54 7.24-7.21 1.44-14.35 1.18-20.99-2.2-9.17-4.65-14.8-12.12-16.42-22.37-1.38-8.76.19-16.94 5.52-24.18 4.68-6.35 10.88-10.4 18.77-11.58 5.12-.76 10.2-.6 15.11 1.23a17.17 17.17 0 0 1 8.18 6.24c.13.21.29.4.45.58.07 0 .15 0 .23-.03l.03-.02Zm-18.04 4.99c-3 0-5.62.63-7.95 1.9-7.08 3.9-10.3 11.33-8.47 19.61 2.07 9.41 12.37 15.35 21.44 12.29a17.33 17.33 0 0 0 11.19-20.55c-1.52-6.45-8.1-13.54-16.21-13.25ZM318.69 92.93c-.9 1.78-1.63 3.43-2.54 5-4.52 7.68-11 12.78-19.84 14.35-17.3 3.08-31.03-6.8-35.45-21.68-5.18-17.48 5.88-35.8 23.79-39.23 9.38-1.8 17.85.76 25.15 6.9 4.88 4.1 8.41 9.17 9.93 15.5a41.84 41.84 0 0 1 1.02 11.11c-.03 1.25-.1 1.3-1.36 1.3h-44.54c-.93 0-1.32.47-1.18 1.4a14.61 14.61 0 0 0 12.7 12.33c3.8.47 7.5.37 11.06-1.25a15.32 15.32 0 0 0 6.2-5.05c.26-.34.78-.68 1.17-.68 4.34-.05 8.66-.02 13-.02.18 0 .36.02.88.1v-.08ZM306.1 75.5l.05-.32c0-.1-.02-.18-.05-.26-1.07-3.45-2.88-6.43-5.83-8.57-3.68-2.67-7.87-3.4-12.31-2.98a16.26 16.26 0 0 0-13.78 11.34c-.08.24-.08.52-.1.81h32.02v-.02Z"/><path fill="#046530" d="M87.36 52.54h13.86c.7 0 .7.5.86.92l6.04 17.2 6.98 19.94c.1.3.2.58.44 1.1.21-.52.34-.8.45-1.1 4.44-12.3 8.91-24.62 13.33-36.93.29-.84.65-1.15 1.57-1.13 3.92.06 7.84 0 11.76 0h1.13c-.13.42-.24.7-.34.97-7.59 18.95-15.14 37.88-22.7 56.83-.28.7-.62 1-1.4 1-2.93-.06-5.84-.03-8.76 0-.66 0-1-.16-1.26-.82-7.19-19-14.43-38-21.64-57-.1-.27-.19-.53-.32-.95v-.03ZM415.17 87.91v22.22c0 .87-.23 1.13-1.1 1.13-3.6-.06-7.21-.06-10.82 0-.94 0-1.15-.3-1.15-1.18V66.01c0-1-.5-1.5-1.52-1.5h-4.62c-.66 0-.9-.2-.9-.86V53.38c0-.6.22-.84.84-.81 1.6.03 3.22 0 4.81 0 .76 0 1-.26 1-.97-.05-2.43.08-4.8.7-7.19 1.63-6.24 5.86-9.62 11.92-11.08 3.27-.78 6.6-.84 9.91-.76.52 0 .7.21.7.73v10.64c0 .6-.28.7-.8.73-1.62.16-3.27.19-4.84.6a5.7 5.7 0 0 0-3.95 6.8c.06.21.55.45.84.45 2.54.02 5.1.05 7.63 0 .84 0 1.15.18 1.13 1.1-.06 3.29-.06 6.58 0 9.88 0 .73-.21.99-.97.99-2.61-.03-5.2 0-7.82-.03-.83 0-1.07.27-1.07 1.08.03 7.45 0 14.87 0 22.32l.08.05ZM254.09 72.38v37.67c0 .97-.26 1.23-1.2 1.2-3.61-.05-7.22-.05-10.82 0-.9 0-1.13-.28-1.13-1.12V34.7c0-.92.31-1.18 1.2-1.15 3.64.05 7.3.05 10.93 0 .86 0 1.05.29 1.05 1.07v37.77h-.03ZM234.7 64.23c-1.76.34-3.46.63-5.13 1.02-5.1 1.2-7.87 4.55-8.57 9.62a52.66 52.66 0 0 0-.53 7.03c-.05 9.38 0 18.77 0 28.15 0 .86-.42 1.28-1.28 1.28h-12.18v-58.7h12.68v6.74l1.2-1.36a17.6 17.6 0 0 1 12.89-6.28c.78-.02 1.02.19 1.02.97-.03 3.58 0 7.16 0 10.74 0 .3-.03.55-.05.79h-.06ZM185.76 92.75c-.37 0-.84.34-1.07.68a15.25 15.25 0 0 1-7.04 5.46c-3.26 1.28-6.66 1.39-10.09.94a14.56 14.56 0 0 1-12.54-11.13c-.19-.76-.3-1.57-.45-2.49h47.37c-.13-2.98-.1-5.85-.42-8.68-.84-7.63-4.37-13.88-10.12-18.84-7.76-6.75-16.78-9.39-26.84-7.11-14.4 3.24-26.98 17.75-23.35 36.33 3.66 18.77 21.91 29.52 40.52 23.24 8.18-2.77 13.65-8.68 17.2-16.42.29-.6.53-1.22.81-1.93-.28-.03-.42-.08-.57-.08-4.47 0-8.92 0-13.39.03h-.02Zm-16.81-29.36c11.1-1 16.68 5.73 18.14 12.08h-31.9c.66-5.07 6.41-11.42 13.76-12.08Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h425v191.04H0z"/></clipPath></defs></svg>
diff --git a/services/web/test/frontend/features/project-list/helpers/render-with-context.tsx b/services/web/test/frontend/features/project-list/helpers/render-with-context.tsx
index ec8f879a63..deda37a2fa 100644
--- a/services/web/test/frontend/features/project-list/helpers/render-with-context.tsx
+++ b/services/web/test/frontend/features/project-list/helpers/render-with-context.tsx
@@ -5,6 +5,7 @@ import { ColorPickerProvider } from '../../../../../frontend/js/features/project
 import { ProjectListProvider } from '../../../../../frontend/js/features/project-list/context/project-list-context'
 import { Project } from '../../../../../types/project/dashboard/api'
 import { projectsData } from '../fixtures/projects-data'
+import { SplitTestProvider } from '@/shared/context/split-test-context'
 
 type Options = {
   projects?: Project[]
@@ -36,7 +37,9 @@ export function renderWithProjectListContext(
     children: React.ReactNode
   }) => (
     <ProjectListProvider>
-      <ColorPickerProvider>{children}</ColorPickerProvider>
+      <SplitTestProvider>
+        <ColorPickerProvider>{children}</ColorPickerProvider>
+      </SplitTestProvider>
     </ProjectListProvider>
   )