Highlights comments. #783

[ab-shrek]

Title

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Fixes #783

Description

Highlights a comment if clicked on the comment timestamp. User can highlight unlimited comments. The page gets reloaded once clicked and the highlighted comment shows up on top of comments feed. The change does not provide any functionality to remove highlight from the comment as of now.

Screenshots

Testing

Tested manually on electron app.
Clicked on comment timestamp. Noted that page gets reloaded and the highlighted comments show up on top.

Desktop

• OS:
• OS Version:
• FreeTube version:

Additional context

[kommunarr]

Hi ab-shrek, thanks for taking the initiative on this! I have a few UX criticisms, but after trying YouTube's attempt at this feature, almost all issues I have are adopted from the glaring UX problems with a multi-billion dollar company's feature (!!). So I'll mark those concerns with "YTE" for "YT-existent".

1. (YTE) Could you add a title property to the timestamp button that highlights a comment (i.e., "Highlight Comment" / "Unhighlight Comment"? I had no idea where to even find this feature at first, let alone identify what would happen if I clicked on the comment timestamp (if not for the context of this PR).
2. For the same reason as 1, please add some hover styling to the comment timestamp.
3. Please add your new strings to en-US.yaml.
4. This doesn't currently work with replies to a comment. You'll need to add this logic to the template, add a new display string ("Highlighted reply"), and ideally update the logic to bring the ancestor to the forefront as well, like done in YT below.

5. (YTE) Reloading the whole page on highlighting a comment seems like a pretty unpleasant UX. Could you instead do something like remove and prepend the ancestor comment (see point 4) to the commentData array?
6. (YTE) As you mentioned, unhighlight would be great.
7. (YTE) (non-required) Implementing unhighlight without reloading the page is tough to do accurately on subsequent page loads. But you can do this for the same non-reloaded session by storing the originalCommentIndex as a property on the comment object on highlight(), setting the original array entry to null instead of removing it as I suggested in point 5, and on unhighlight(), check to see if the comment has an originalCommentIndex first, and swap instead of reloading if so. You'd also have to update the template v-for to be v-for="(comment, index) in commentData.filter((c) => c) to preclude nulls from being rendered.

Again, great job with what's here so far; let me know if you have any questions or need any support.

[efb4f5ff-1298-471a-8973-3d47447115dc]

Hi @ab-shrek why did u close this PR and create a new one?

[ab-shrek]

I am sorry; got into a weird mess and tried undoing it which led to this PR being closed. Can you please check the latest PR instead?