diff --git a/README.md b/README.md
index f235868f..a898c849 100644
--- a/README.md
+++ b/README.md
@@ -23,13 +23,7 @@ This is an alternative web client for [Mastodon](https://joinmastodon.org/).
π Follow [@phanpy on Mastodon](https://hachyderm.io/@phanpy) for updates β¨
-Everything is designed and engineered for my own use case, following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.
-
-π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§
-
-**π This is an early ALPHA project. Many features are missing, many bugs are present. Please report issues as detailed as possible. Thanks π**
-
-π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§π§
+Everything is designed and engineered following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.
## Features
@@ -37,7 +31,7 @@ Everything is designed and engineered for my own use case, following my taste an
- πͺ Compose window pop-out/in
- π Light/dark/auto theme
- π Grouped notifications
-- πͺΊ Nested replies view
+- πͺΊ Nested comments thread
- π¬Β Unsent draft recovery
- π Β Boosts Carouselβ’οΈ
- β‘ Shortcutsβ’οΈ with view modes like multi-column or tab bar
@@ -51,6 +45,33 @@ Everything is designed and engineered for my own use case, following my taste an
- **No autoplay for video/GIF/whatever in timeline**.
The timeline is already a huge mess with lots of people, brands, news and media trying to grab your attention. Let's not make it worse. (Current exception now would be animated emojis.)
- **Hash-based URLs**.
This web app is not meant to be a full-fledged replacement to Mastodon's existing front-end. There's no SEO, database, serverless or any long-running servers. I could be wrong one day.
+## Subtle UI implementations
+
+### User name display
+
+
+
+- On the timeline, the user name is displayed as `[NAME] @[username]`.
+- For the `@[username]`, always exclude the instance domain name.
+- If the `[NAME]` *looks the same* as the `@[username]`, then the `@[username]` is excluded as well.
+
+### Boosts Carousel
+
+
+
+- From the fetched posts (e.g. 20 posts per fetch), if number of boosts are more than quarter of total posts or more than 3 consecutive boosts, boosts carousel UI will be triggered.
+- If number of boosts are more than 3 quarters of total posts, boosts carousel UI will be slotted at the end of total posts fetched (per "page").
+- Else, boosts carousel UI will be slotted in between the posts.
+
+### Thread number badge (e.g. Thread 1/X)
+
+
+
+- Check every post for `inReplyToId` from cache or additional API requests, until the root post is found.
+- If root post is found, badge will show the index number of the post in the thread.
+- Limit up to 3 API requests as the root post may be very old or the thread is super long.
+- If index number couldn't be found, badge will fallback to showing `Thread` without the number.
+
## Development
Prerequisites: Node.js 18+
@@ -63,6 +84,12 @@ Prerequisites: Node.js 18+
- requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set
- `npm run sourcemap` - Run `source-map-explorer` on the production build
+## Self-hosting
+
+This is a **pure static web app**. You can host it anywhere you want. Build it by running `npm run build` and serve the `dist` folder.
+
+Try search for "how to self-host static sites" as there are many ways to do it.
+
## Tech stack
- [Vite](https://vitejs.dev/) - Build tool
diff --git a/readme-assets/boosts-carousel.jpg b/readme-assets/boosts-carousel.jpg
new file mode 100644
index 00000000..610f23df
Binary files /dev/null and b/readme-assets/boosts-carousel.jpg differ
diff --git a/readme-assets/thread-number-badge.jpg b/readme-assets/thread-number-badge.jpg
new file mode 100644
index 00000000..8519e062
Binary files /dev/null and b/readme-assets/thread-number-badge.jpg differ
diff --git a/readme-assets/user-name-display.jpg b/readme-assets/user-name-display.jpg
new file mode 100644
index 00000000..01802ec0
Binary files /dev/null and b/readme-assets/user-name-display.jpg differ