**As a** project member
**I want to** filter my Begin of the insertionunreadEnd of the insertion notifications by project Begin of the deletion or my involvement typeEnd of the deletion
**so that** identify and access the most relevant notifications Begin of the insertionquickly, especially when I am organising my workflow by project.End of the insertion Begin of the deletion quickly.End of the deletion

**Note** 
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" Begin of the insertionsrc="/api/v3/attachments/22079/content"></div></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/22015/content"></div></figure>

_Visual 2: Involvement Filter_

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22033/content"></div></figure>End of the deletion



**Acceptance Criteria**

* Besides unread/all (already implemented), there Begin of the insertionis oneEnd of the insertion Begin of the deletion are twoEnd of the deletion other Begin of the insertionfilter  availableEnd of the insertion Begin of the deletion filters that are availableEnd of the deletion to users in the &quot;Inbox&quot; view in notification center: Begin of the insertion&quot;Project&quot;.End of the insertion Begin of the deletion project and involvement.End of the deletion
* Begin of the deletion The length of these two filter drop-downs is fixed (length to be discussed; the idea is to have both filters be visible in split screen view). All text that exceed this fixed-length are truncated with a &quot;...&quot;.
* End of the deletion By default, the project Begin of the insertionfilter isEnd of the insertion Begin of the deletion and involvement criteria are bothEnd of the deletion inactive (i.e, notifications from all projects Begin of the deletion and for all involvement typesEnd of the deletion are Begin of the insertiondisplayed by default).End of the insertion Begin of the deletion displayed)End of the deletion
* When the Begin of the insertionfilter isEnd of the insertion Begin of the deletion filters areEnd of the deletion inactive, Begin of the insertionitEnd of the insertion Begin of the deletion theyEnd of the deletion will Begin of the deletion respectivelyEnd of the deletion simply Begin of the insertionread &quot;Filter by Project&quot;.End of the insertion Begin of the deletion read:&quot;Project&quot; and &quot;Involvement&quot;.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).
* The Begin of the deletion the list of projects is scrollable; its height should be limited to ensure that the &quot;Apply&quot; button is visible to theEnd of the deletion user Begin of the deletion in their viewport without having to scroll.
* The userEnd of the deletion can select as many or as few projects as they please.
* Zero selections mean the filter remains inactive.
* 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.
* If two or more projects are selected, the title should be &quot;\[n\] projects&quot; where n = number of projects selected.
* The Begin of the insertiondrop down as an &quot;active&quot; state (blue) which is visually distinct from the inactive state.
* TheEnd of the insertion 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 insertionThereEnd of the insertion Begin of the deletion When the user clicks on the Involvement drop-down, they are presented with this list of Involvement types based on the notification project settings:
* When I am @mentioned
* Assigned to me or I am accountable for
* New work packages
* All status changes
* All date changes
* All priority changes
* All new comments
* For both these filter types, thereEnd of the deletion 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 insertionThe the 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.
* The filter hasEnd of the insertion Begin of the deletion Both filters containEnd of the deletion a &quot;Clear selection&quot; button that deselects all current Begin of the insertionproject selections.End of the insertion Begin of the deletion selections for that filter.End of the deletion _(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?)_
* The filter Begin of the insertionselection isEnd of the insertion Begin of the deletion selections areEnd of the deletion applied asynchronously and Begin of the insertiondoesEnd of the insertion Begin of the deletion doEnd of the deletion not necessitate a refresh.

**Mockups in Figma** 
Link to relevant mockups in Figma: 
\- Project filter: Begin of the insertionhttps://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=90%3A2719End of the insertion Begin of the deletion [https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=90%3A2719](https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=90%3A2719) 
\- Involvement filter: [https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=609%3A2602](https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=609%3A2602)End of the deletion