feat(ui): answer engine with thread sharing

[wwayne]

Mock for review first, not merging

Screen record:

https://jam.dev/c/39e63f7a-b5e5-4725-9b68-994aaf68895a

Screenshots

Why I only put a button for coping link:

• Currently, we only share the link. There is no authentication protection or sharing to other platforms, so adding a popup to the share button would be redundant.
• Using the text Copy Link or Copy Thread feels a bit wired on UI. Therefore, I use the word Share with a tooltip that says Copy Thread Link

Details

Asking a Question on the Home Page

1. We will open /search?q=pending
2. After the first answer loads and the threadId is obtained:
   • The url will be modified to /search/title-threadId
   • The top-right button will show up (in the mock, we hide this button bc missing threadId, we can modify the react logic to display this button for testing) Note: After modifying the URL, you can use the browser's back navigation to return to the home page. However, you won't be able to use the browser's forward navigation after that. It should because of using window.history.replaceState, but I haven't found better solution.

When loading a page /search/title-threadId

• The frontend will extract the threadId from the URL path.
• The page will display a loading skeleton and fetch the thread from the server
• After retrieving the thread's author information, the frontend will detect if the current user is the author, and if so, show the follow-up question input field.

TODO

• Integrate with the backend thread data (create / update)
• Get the thread's author info from the backend
• When opening /search/title-threadId#number, it should smooth scrolling down to the corresponding question/answer block
• web server path for the /search (already known how to update)