Test flight mentions autocomplete view

[Korede612]

Pull Request Title

Mentions autocomplete view redesigns https://github.com/stakwork/sphinx-mac/issues/398

Description

This pull request addresses the Mentions autocomplete view redesigns in Issue https://github.com/stakwork/sphinx-mac/issues/398.

The following are the addressed issues:

• Apply all designs with right sizes, colors and assets for both dark and light mode.
• Navigation should be allowed with keyboard arrow keys and mouse.
• The view should show horizontally aligned with the cursor position as shown on the designs.
• It should adapt its height to mentions count if they are less than 3 and scroll if they are more than 3.

Changes Made

• Color:
  • Selected mentioned colour added
  • NSColor.swift file update for the new colour.
• Dashboard.storyboard
  • UI updated via the interface builder
• ChatMentionAutocompleteCell.swift
  • Updated the ChatMentionAutocompleteCell to handle the selected colour and the BGColour
• ChatMentionAutocompleteCell.xib
  • Updated the Mentioned Cells of the collection view to match the Figma design
• ChatBottomView.swift
  • Updated the shouldUpdateMentionSuggestionsWith method to ensure the mentioned is aligned with the textfields
• ChatMessageFieldView+MentionsMacrosExtension.swift
  • Updated didDetectPossibleMentions method to pass the cursor position
• ChatMentionAutocompleteDataSource.swift
  • Updated updateMentionTableHeight method to display maximum of three items and adapt in view if the item is less than 3
• ChatMessageFieldView.xib:
  • Updated the UI via interface builder
• NewChatViewController+BottomTopBarsExtension.swift:
  • Updated the shouldUpdateMentionSuggestionsWith method
  • Added getCurrentPosition method to get the distance from the leading of the view to the collection view
• NewChatViewController.swift:
  • Added setupCollectionView() method to setup the collection view

    Link:

• Here is the video link for the implementation on both light and dark mode
  • https://www.loom.com/share/a4b3bfb741434b15a486f115e0ac0786?sid=4139a373-e5b3-4323-82d3-8b9eeb0cc7ae
  • https://www.loom.com/share/83f1f479167547b680834ef47ffba4a6?sid=f7c78676-b6e7-4500-bc77-343dc4f18a81

[tomastiminskas]

@Korede612 I was reviewing the videos and they look great. The only thing that I’m not sure it’s right is the horizontal margin between the selected mention box and the container box. it seems smaller than the one on the designs, but can’t be sure actually since I didn’t check the code yet.

Also top and bottom margins seems a bit wrong. If you see this screenshot from your video you will see there’s a bigger margin on the top than on the bottom (the bottom row image is almost touching the bottom edge of the container, but the top row has a margin with the top of the container). They should be vertically centered so both the bottom and the top margin are the same.

The colors look different but I guess it's because of the video (please double check all color hex codes)

Finally I would like videos of a mention in a second or third line of the message (like a multiline message in the field and a mention not in the first line) and also writing enough letters so the suggestions are less than 3 to see how the box height adapts to its content.

Thanks in advance

[Korede612]

Update on the Multi-line Mention

Changes made

• NewChatViewController
  • Added bottom constraints property (as an IBOutlet)
  • Connect it to the interface builder
• NewChatViewController+BottomTopBarsExtension.swift:
  • Updated the shouldUpdateMentionSuggestionsWith method

Note:

• The top padding is much on scrolling because it shows more items is at the top and once it get to the top, the padding seems normal.
• Same is for the bottom also when scrolling down.

New Video Link:

• https://www.loom.com/share/40905bdd00e84f3eb51d65b6e53d9c43?sid=794dc83a-98e5-4ddc-aa34-fa76ff56885e

[tomastiminskas]

@Korede612 ok great. I will try to review the code between today and tomorrow and let you know, thanks!