# Feature MEET-407 - Highlight the meeting agenda item when the user gets to a meeting via a deep link 

Project: Stream Meetings
Status: closed
URL: https://community.openproject.org/work_packages/MEET-407

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 16.6.0 |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| COMMS-480 | Bug | Comment hyperlink does not redirect to WP comment | rejected |  |  |  | Modules and project features / Comments and activity, Modules and project features / Navigation |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / Meetings |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/w0YoqQ5v0JGNT5NS5NZJZq/Comments-with-restricted-visibility?node-id=563-5329 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers | Oliver Günther |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**As** a user who follows a deep link on a page with an anchor  
**I want to** get to the page in the right scroll position and the item highlighted in some way  
**so that** I know which element I should be looking at

**Acceptance criteria**

  - When the user follows a link with an anchor (eg. to a specific comment in the Activity tab or a meeting agenda item)
    
      - Auto-scroll such that the deep-linked element is around the top of the page
        
          - Leave a 100px gap at the top so that it doesn't sit flush with the top and doesn't end up being hidden behind the header
    
      - Highlight that element with a blue outline border (like in GitHub)
        
          - Colour:  `--borderColor-accent-emphasis`
        
          - Width: 2px
    
      - The browser url (with anchor) is replaced with the canonical URL after the next user interaction (eg. click anywhere on the page).
        
          - The blue outline is also removed.

**Technical notes**

  - This has been implemented for work packages already with <mention class="mention" data-id="62712" data-type="work_package" data-text="#62712">\#62712</mention>  (see this [PR](https://github.com/opf/openproject/pull/20124)) and only needs to be done for meeting agenda items

  - The [**:target CSS pseudo-class**](https://developer.mozilla.org/en-US/docs/Web/CSS/:target) could be used, but un-highlighting by clicking anywhere in the page is probably not easy that way

  - How does GitHub do the replacing of an anchored deep-link with the canonical? Can we take inspiration from that?

**Mockups**

Please see [Figma file](https://www.figma.com/design/w0YoqQ5v0JGNT5NS5NZJZq/Comments-with-restricted-visibility?node-id=563-5329) for the most up-to-date mockups. The following is just a reference:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:529px;" src="/api/v3/attachments/404829/content">

GitHub uses a blue border (eg. [Deep-linked comment on a PR](https://github.com/opf/openproject-website/pull/3475#pullrequestreview-2318494347))**:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:506px;" src="/api/v3/attachments/400730/content">

**Permissions and visibility considerations**

  - *Nothing specific*

**Translation considerations**

  - *None*

**Out of scope**

  - [Animation](https://primer.style/brand/getting-started/animation) is not in this scope, although Primer seems to afford some (but in Primer)