Storyclash Notes Project

Objective

We are adding a new feature to our tool for note-taking between users. Your task is to build a small app that allows users to interact with notes.

Create & Edit Notes:
- Users should be able to create and edit notes through a modal dialog. The dialog should allow for entering and updating note content.
- Upon submission of a note, the content should be automatically refreshed and displayed in real-time without requiring a page reload.
Note Structure:
- Each note should include:
  - Creation Date: Automatically recorded when the note is first created.
  - Text Content: The main body of the note.
  - Last Edited Date: Automatically updated whenever a note is modified.
  - User: Assigned randomly from a predefined list of users, each with a unique name and avatar (no user authentication or management is required).
Threaded Notes:
- Notes should support one level of threaded replies. Users should be able to reply to existing notes.
- If a note has more than two replies, the thread should automatically collapse, showing only the most recent reply. An option should be provided to expand the thread and view all replies.
Deletion:
- When a note is deleted, all associated replies (i.e., all replies in the thread beneath the note) should also be automatically deleted.

We provide a Figma file for the design. Your implementation should closely adhere to the provided design to ensure consistency and visual quality.

Framework: Use Vue 3 with the Options API.
Component Libraries: Do not use UI component frameworks like Vuetify to ensure design consistency. However, you are free to use other third-party libraries that simplify your workflow (e.g., Axios for API communication).