<!--IssueSummary start--> <details> <summary> Everyone can contribute. [Help move this issue forward](https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/community-contributors-workflows/#contributor-links) while earning points, leveling up and collecting rewards. </summary> - [Close this issue](https://contributors.gitlab.com/manage-issue?action=close&projectId=278964&issueIid=483952) </details> <!--IssueSummary end--> ### Proposal This proposal addresses the following items - Making resolved status of threads look similar for comments and diffs - Handle single comment thread when resolved https://gitlab.com/gitlab-org/gitlab/-/issues/548113 #### Proposed changes 1. Use a badge ":green_check_mark: Resolved" for all threads in the resolved state 1. The badge serves as an indicator of the resolved state. It was considered to use the "resolve" button since is minimal but reopening a thread without context of thread was the concern https://gitlab.com/gitlab-org/gitlab/-/issues/483952#note_2100865264. 2. Debating if we should sticky with icon button https://gitlab.com/gitlab-org/gitlab/-/issues/483952#note_2955351731 1. Overflow menu provides a way to link to comment 2. Changing "X replies" to "Show thread" avoids situation currently where we count the replies differently when it is a thread and a diff thread. With a diff thread it counts the comment as a reply too. - Currently if there 2 replies to a comment on a diff thread, it will say "3 replies" 4. Display file path on collapsed state of diff thread will help give context which comment was collapsed 1. Based on discussions in this issue on changing "file" to a filepath 2. Order of information is considering this comment https://gitlab.com/gitlab-org/gitlab/-/issues/560513/designs/open_threads.png#note_2795832506 "I still prefer using dates to navigate to a particular thread". 5. Introduces a collapsed state to resolved threads that appear on Overview tab since these comments could have images and other content that currently remain expanded 1. Show a truncated preview of comment 2. Not all comment could be truncated if it is a non-text content so will propose to display "Comment with content hidden" as a generic handler (see Egde cases below) ### Designs [Figma > Comments and Diffs](https://www.figma.com/design/0ABBYYEvZTroTREb7yydtk/Comments-and-Diffs?node-id=197-23089&t=hEiNQZNJlY3W7OtK-1) There shouldn't be any major spacing/padding changes. Any deviations you see in the mockups and Figma from what is in production today can be ignored unless it is new additions. ### Resolved threads | State | Current | Proposal | | ------ | ------ | ------ | | Thread resolved | {width=664 height=212} | {width=664 height=212} | | Diff resolved | {width=664 height=168} | {width=664 height=168} | | Single comment thread resolved | {width=664 height=248} | {width=664 height=236} | ##### Threads - States | Expanded | Collapsed | Resolved Collapsed | Resolved Expanded | | ------ | ------ | ------ | ------ | | {width=664 height=412} | {width=664 height=224} | {width=664 height=172} | {width=664 height=424} | ##### Diff - States | Expanded | Collapsed | Resolved Collapsed | Resolved Expanded | | ------ | ------ | ------ | ------ | | {width=664 height=568} | {width=664 height=152} | {width=664 height=168} | {width=664 height=580} | ##### Single comment thread - States Addresses this issue https://gitlab.com/gitlab-org/gitlab/-/issues/548113+ | Expanded | Resolved Collapsed | Resolved Expanded | | ------ | ------ | ------ | | {width=664 height=236} | {width=664 height=172} | {width=664 height=248} | ### Edge cases When content begins with an image, table, or a media type that cannot be truncated, will display "Comment with content hidden". Only upon expanding this thread will the content be visible {width=664 height=172} ### Background The following discussion from !165005 should be addressed: - [ ] @slashmanov started a [discussion](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/165005#note_2094337147): (+3 comments) > @seggenberger WDYT of providing the same resolved status for diff threads as for the regular ones? > > {width=942 height=337} > > Right now it's not consistent: > > {width=954 height=387}