**As a** project member
**I want to** filter my unread notifications by project
**so that** identify and access the most relevant notifications quickly, especially when I am organising my workflow by project.

Begin of the insertion**Note** End of the insertion Begin of the deletion **Note** End of the deletion
This builds on the filters that were out of scope for work package <mention class="mention" data-id="38592" data-type="work_package" data-text="#38592">#38592</mention> concerning the Main List view.

**Visuals** 
_Visual 1: Project Filter_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22079/content"></div></figure> Begin of the insertion

End of the insertion Begin of the deletion



End of the deletion **Acceptance Criteria**

* Besides unread/all (already implemented), there is one other filter  available to users in the &quot;Inbox&quot; view in notification center: &quot;Project&quot;. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * By default, the project filter is inactive (i.e, notifications from all projects are displayed by default). Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * When the filter is inactive, it will simply read &quot;Filter by Project&quot;. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * When the user clicks on the Project dropdown list, they are afforded the ability to select individual projects (including sub-projects) via a list of checkboxes that represent existing project hierarchies (much like the drop-down that is displayed when clicking on &quot;Projects&quot; in the top-left corner of the screen today). Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The user can select as many or as few projects as they please. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * Zero selections mean the filter remains inactive. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * If only one project is selected, the filter title is the name of the project, truncated to the maximum length permitted by this filter dropdown element. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * If two or more projects are selected, the title should be &quot;\[n\] projects&quot; where n = number of projects selected. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The drop down as an &quot;active&quot; state (blue) which is visually distinct from the inactive state. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The project filter also has a search box that functions the same as the search box that is currently implemented to browse projects. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * There is an &quot;Apply&quot; button that applies the filter. Until this button is clicked, the filters are not applied. _(Note: behaviour to be confirmed, needs discussion, should we consider what clicking outside the dialog does)._ Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The Begin of the deletion theEnd of the deletion list of projects is scrollable; its height should be limited to ensure that the &quot;Apply&quot; button is visible to the user in their viewport without having to scroll. Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The filter has a &quot;Clear selection&quot; button that deselects all current project selections. _(Note for discussion: does the button automatically clear the selection and apply the no selection? Or will the user then have to click on Apply?)_ Begin of the insertion

End of the insertion Begin of the deletion
End of the deletion * The filter selection is applied asynchronously and does not necessitate a refresh. Begin of the insertion


End of the insertion Begin of the deletion

End of the deletion **Mockups in Figma** 
Link to relevant mockups in Figma: 
\- Project filter: https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=90%3A2719