docs: feature overviews (#114)

fix: per instance client registration
docs: some basic usage docs
perf: cache obtained tokens for instance
fix: scrolling in tutorial page (#111)

apps/docs/docs/usage/intro.md

@@ -0,0 +1,44 @@
+---
+sidebar_position: 2
+displayed_sidebar: discoverSidebar
+title: Contents
+---
+
+This section will guide you through various ways in which you can perform
+basic SNS actions with Dhaaga.
+
+### General Interactions
+
+- [Timelines](/docs/usage/timelines)
+- Posts
+- Authoring Posts
+
+### Exclusive Features
+
+- Timeline Widget
+- Bookmark Gallery
+- Known Servers
+
+## FAQ
+
+**Q. Why would an app need an entire usage manual? should it all not be
+intuitive out of the box? 😅**
+
+A. A finished product, yes. But, Dhaaga is FOSS and is built
+transparently and taking in community feedback.
+
+Even after writing tens of
+thousands of lines of code over a span of couple months,
+I am nowhere near done making it a decent experience for the average user.
+
+Also, this is my first time building an app. So, some of the designs might
+feel like having been built by a backend guy on shrooms on a chilly night.🫠
+
+A few moment of your time is all I ask.
+
+Suggestions, Feedbacks, Criticism are all welcome 🫶.
+
+**Q. Too many walls of text 😭**
+
+A. Plan on revisiting and simplifying sections as I make the in-app workflows
+simpler and more intuitive 🥹

apps/docs/docs/usage/post-interactions.md

@@ -0,0 +1,137 @@
+---
+sidebar_position: 2
+displayed_sidebar: discoverSidebar
+title: Interacting With Posts
+---
+
+It is no secret that this UI is heavily inspired by Facebook.
+
+I grew up with it and have fond memories from the glory days of facebook.
+
+Also, not a big fan of how every app is a twitter clone 🫠, so here's my
+humble hat in the ring int he design department.
+
+## The Core Interactions Sheet
+
+It is available for every post. And the actions and indicators have been
+standardised, regardless of software.
+
+:::info
+
+Some of the important actions (like Boost) do not have a confirmation
+dialogue, as of yet.
+
+:::
+
+### How it Looks
+
+<img
+src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide" +
+"/posts/basic.png?raw=true"}
+alt={"basic"}
+width={480}
+/>
+
+### What it Does
+
+✅ Implemented | 🚧 Coming Soon | ⏱️ Planned
+
+- **Reply**:
+    - 🚧 **Short Press:** Opens Reply Sheet
+    - 🚧 **Long Press:** Opens Reply Sheet with "quote post" template
+    - 🚧 **Highlighted When:** You have either replied or quoted this post
+- **Boost**
+    - ✅ **Short Press:** Boosts the post
+    - ⏱ **Long Press:** Shows more boost/share options
+    - ✅ **Highlighted When**: Boosted this post
+- **Save**
+    - ✅ **Short Press:** Bookmark the post
+    - ⏱ **Long Press:** Add to Clip (Misskey feature)
+    - ✅ **Highlighted When:** Bookmarked
+- **Translation**
+    - 🚧 **Short Tap:** Translate using instance DeepL or LibreTranslate
+    - ✅ **Long Press:** Explain using OpenAI *(Not available in Lite edition)*
+    - ✅ **Highlighted When:** Translated/Explained
+- **More Options**
+    - ⏱ **Short/Long Tap:** Shows the "More Options" bottom sheet with tons of
+      extra options
+
+## The Stat Interactions Sheet
+
+It is shown when there is at least one from any of
+
+- Replies
+- Boosts
+- Favourites
+
+<img
+src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/posts/stats.png?raw=true"}
+alt={"basic"}
+width={480}
+/>
+
+The current interaction is pretty basic.
+
+- You press star to favourite the post (N/A for Misskey forks)
+
+- **Star Icon**
+    - ✅ Short Press: Add/Remove Favourite (Mastodon only)
+    - ✅ Highlighted When: Favourited (Mastodon only)
+
+:::info
+
+In a future update, these metrics will be clickable, opening a bottom sheet
+right on top of your timeline.
+
+You will be able to see who boosted/liked or even replies without going to
+another screen !!!
+
+:::
+
+## The User/Hashtag/Link sheets
+
+Normally, clicking on a hashtag takes you to the corresponding timeline.
+
+Clicking on a user takes you to th profile page
+
+~~^ Don't quote me on that. I know Phanpy opens a bottom sheet for some of
+these.~~
+
+The bottom sheets in Dhaaga are implemented, but in very early phase of
+development.
+
+<details>
+<summary>Here are a few screenshots, if you are interested</summary>
+
+<img
+src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/posts/bottom_sheet_hashtag.jpg?raw=true"}
+alt={"basic"}
+width={320}
+/>
+
+<img
+src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/posts/bottom_sheet_link.jpg?raw=true"}
+alt={"basic"}
+width={320}
+/>
+
+<img
+src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/posts/bottom_sheet_link.jpg?raw=true"}
+alt={"basic"}
+width={320}
+/>
+
+</details>
+
+## The Uncertain
+
+Aaaaand, of course there are sections that I have not planned anything yet.
+
+<img
+src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/posts/pending_design.jpg?raw=true"}
+alt={"basic"}
+width={320}
+/>
+
+^ Image credit in Screenshot btw, go check them out.
+

apps/docs/docs/usage/posting.md

@@ -0,0 +1,17 @@
+---
+sidebar_position: 2
+displayed_sidebar: discoverSidebar
+title: Creating Posts
+---
+
+
+I went with a bottom sheet with this one.
+
+Handy. Swipes in. Simple UI.
+
+:::info
+
+Currently, only authoring posts is possible. Replies will be supported in a
+future release.
+
+:::

apps/docs/docs/usage/timelines.mdx

@@ -0,0 +1,112 @@
+---
+sidebar_position: 2
+displayed_sidebar: discoverSidebar
+title: Using Timelines
+---
+
+With some exceptions, you want to be in the first (Home) tab to view all
+your timelines.
+
+Dhaaga is a single column client, with nifty tools to switch between them
+effortlessly.
+
+### The "Social Hub"
+
+This is your entrypoint and AFK lobby in the home tab.
+
+Whenever you switch your account, your home page is reset to this.
+
+It is pretty barebones for a home page at the moment 😔
+
+<img
+	src={"https://raw.githubusercontent.com/suvam0451/dhaaga-assets/main/assets/usage-guide/timelines/social_hub.jpg?raw=true"}
+	alt={"Social Hub"}
+	width={240}
+	align={"center"}
+/>
+
+:::info
+
+In the future, this page will contain all your pinned timeline destinations,
+notification summary and
+and let you "continue where you left off"
+
+:::
+
+### Accessing Timelines
+
+You either select a destination from your Social Hub or switch between
+timelines using the Timeline Switcher.
+
+The timeline switcher can be accessed from the marked locations.
+
+<img
+	src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/timelines/switcher_access.jpg?raw=true"}
+	alt={"Timeline Switcher Access Locations"}
+	width={240}
+	align={"center"}
+/>
+
+To see the destinations available and planned for you from the Timeline
+Switcher, see the corresponding section.
+
+### Setting Timeline Options
+
+Most filters available via your web dashboard is also available at the top
+of every timeline.
+
+I even added a little description for the confused folks new to fediverse. 😉
+
+<img
+	src={"https://github.com/suvam0451/dhaaga-assets/blob/main/assets/usage-guide/timelines/timeline_ontrols.jpg?raw=true"}
+	alt={"Timeline Switcher Access Locations"}
+	width={240}
+	align={"center"}
+/>
+
+
+
+
+### Navigating
+
+That's it. You just scroll down. More posts load automatically.
+
+I don't have anything else exciting to share at the moment (but maybe, maybe
+soonish~).
+
+
+
+:::warning
+
+Depending on your phone, Loading more than 100 or so posts might actually
+cause performance issues and hangs.
+
+While I have creative solutions planned for this, I haven't gotten around to
+implementing them yet.
+
+:::
+
+## FAQ
+
+**Q. What's with loading only 5 posts? Every other client loads like 20 at a
+time.**
+
+A. React Native is the slowest of the app dev trinity (Native/Flutter/RN).
+So, I have to evaluate performance/time impact before I change the limits.
+Also, most other clients are just timeline readers, which I am not a
+fan of.
+
+Here is what Dhaaga has to do for every set of items loaded:
+
+- Parse and render the markdown
+- Make each component (hashtag/mentions/links) interactable via bottom sheets
+- Resolve the custom emojis for those instances
+- Load the replies/parent of a post, if missing
+- Highlight hashtags you are following
+- Establish your relationship with the users and
+- Unify the experience between software
+- e.g. - bookmark status has to be loaded via an extra API call in Misskey
+forks, whereas, in Dhaaga it's all just one UI
+
+td;dr - Dhaaga focuses on the quality of your SNS interaction than volume of
+posts.

apps/docs/docs/usage/user-interaction.md

@@ -0,0 +1,5 @@
+---
+sidebar_position: 2
+displayed_sidebar: discoverSidebar
+title: User Interactions
+---

apps/docs/sidebars.ts

@@ -57,28 +57,41 @@ const sidebars: SidebarsConfig = {
 		'discover',
 		{
 			type: 'category',
-			label: 'Features',
+			label: 'Basic Usage',
 			items: [
 				{
 					type: 'doc',
-					id: 'discover/better-timelines',
+					id: 'usage/intro',
+				},
+				{
+					type: 'doc',
+					id: 'usage/timelines',
+				},
+				{
+					type: 'doc',
+					id: 'usage/post-interactions',
+				},
+				{
+					type: 'doc',
+					id: 'usage/posting',
+				},
+				{
+					type: 'doc',
+					id: 'usage/user-interaction',
 				},
 			],
 		},
-	],
-	// featuresSidebar: [{ type: 'autogenerated', dirName: 'features' }],
-	// But you can create a sidebar manually
-	/*
-	tutorialSidebar: [
-		'intro',
-		'hello',
 		{
 			type: 'category',
-			label: 'Tutorial',
-			items: ['tutorial-basics/create-a-document'],
+			label: 'Features',
+			items: [
+				{
+					type: 'doc',
+					id: 'discover/better-timelines',
+				},
+			],
 		},
 	],
-	 */
 };
 
 export default sidebars;

apps/mobile/app.config.ts

@@ -6,7 +6,7 @@ const expo = ({ config }: ConfigContext): ExpoConfig => ({
 	...config,
 	name: IS_DEV ? 'Dhaaga (Dev)' : 'Dhaaga',
 	slug: 'dhaaga',
-	version: '0.6.0',
+	version: '0.6.1',
 	orientation: 'portrait',
 	icon: './assets/placeholder_icon.png',
 	userInterfaceStyle: 'dark',
@@ -21,7 +21,11 @@ const expo = ({ config }: ConfigContext): ExpoConfig => ({
 	},
 	android: {
 		package: IS_DEV ? 'io.suvam.dhaaga.dev' : 'io.suvam.dhaaga',
-		versionCode: 7,
+		versionCode: 8,
+	},
+	androidStatusBar: {
+		barStyle: 'dark-content',
+		backgroundColor: '#1c1c1c',
 	},
 	splash: {
 		image: './assets/splash.png',