1. Added `topsString` variable:
   - This variable is used to pass the top formula from the dialog.

2. Added unique ID attribute to node HTML:
   - Each node now has a unique ID to facilitate inserting new top nodes' HTML.
   - Created a new variable `topsElementId` to represent the location where new nodes will be inserted. This ID is determined in the `turnstileFunction()`.

3. Removed original `addNodeToTop` function from `sequentAst.js`:
   - The logic previously in `addNodeToTop` has been moved to the `handleSubmitAnswer` function in `App.vue`.

4. Renamed `generateProofTreeHTML` to `generateNodeHTML` in `sequentAst.js`:
   - The new `generateNodeHTML` function now only generates the node and `bottomLatex`.
   - The rule and the bar are now generated in the `handleSubmitAnswer()` function in `App.vue`.

5. Enhanced `handleSubmitAnswer()` function in `App.vue`:
   - This function now also handles the insertion of the new node HTML into the target `tops`.

added more selection fro Virtualized Select, and added a ruleFunction to record wich rule was selected

change generateProofTreeHTML function by inserting an attribute to record the original string. So that we could  pass it to the dialog for rule application. And added currentString and conclusionString to pass this original tring

- Ensure KaTeX renders LaTeX correctly
- Add hover effect on turnstile character (⊢) to guide users
- Used JavaScript to apply CSS class after rendering

added linkSequentNode functions and tests. added isSequentNode, generateProofTreeHTML for the proof tree rendering

Initialised a Vue project with Vue CLI and added my pre-defined function for Rule Implementation and Validation in Javascript function. Every test works well.