Handle-change modal with custom domain support (#273)

* Dont append the server's domain name when a custom domain is used

* Update the settings look & feel and add a tool to remove accounts from the switcher

* Try not rendering the bottomsheet when no modal is active.

There are cases where the bottomsheet decides to show itself when
it's not supposed to. It seems obvious to do what this change is
doing -- just dont render bottomsheet if no modal is active -- but
previously we experienced issues with that approach. This time it
seems to be working, so we're gonna yolo try it.

* Implement a handle-change modal with support for custom domains (closes #65)

src/lib/styles.ts

@@ -30,6 +30,8 @@ export const colors = {
   red3: '#ec4899',
   red4: '#d1106f',
   red5: '#97074e',
+  red6: '#690436',
+  red7: '#4F0328',
 
   pink1: '#f8ccff',
   pink2: '#e966ff',

src/state/models/session.ts

@@ -1,4 +1,4 @@
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {
   AtpAgent,
   AtpSessionEvent,
@@ -368,4 +368,45 @@ export class SessionModel {
     this.clearSessionTokens()
     this.rootStore.clearAllSessionState()
   }
+
+  /**
+   * Removes an account from the list of stored accounts.
+   */
+  removeAccount(handle: string) {
+    this.accounts = this.accounts.filter(acc => acc.handle !== handle)
+  }
+
+  /**
+   * Reloads the session from the server. Useful when account details change, like the handle.
+   */
+  async reloadFromServer() {
+    const sess = this.currentSession
+    if (!sess) {
+      return
+    }
+    const res = await this.rootStore.api.app.bsky.actor
+      .getProfile({actor: sess.did})
+      .catch(_e => undefined)
+    if (res?.success) {
+      const updated = {
+        ...sess,
+        handle: res.data.handle,
+        displayName: res.data.displayName,
+        aviUrl: res.data.avatar,
+      }
+      runInAction(() => {
+        this.accounts = [
+          updated,
+          ...this.accounts.filter(
+            account =>
+              !(
+                account.service === updated.service &&
+                account.did === updated.did
+              ),
+          ),
+        ]
+      })
+      await this.rootStore.me.load()
+    }
+  }
 }

src/state/models/shell-ui.ts

@@ -51,6 +51,11 @@ export interface RepostModal {
   isReposted: boolean
 }
 
+export interface ChangeHandleModal {
+  name: 'change-handle'
+  onChanged: () => void
+}
+
 export type Modal =
   | ConfirmModal
   | EditProfileModal
@@ -60,6 +65,7 @@ export type Modal =
   | CropImageModal
   | DeleteAccountModal
   | RepostModal
+  | ChangeHandleModal
 
 interface LightboxModel {}
 

src/view/com/login/Signin.tsx

@@ -296,6 +296,7 @@ const LoginForm = ({
       let fullIdent = identifier
       if (
         !identifier.includes('@') && // not an email
+        !identifier.includes('.') && // not a domain
         serviceDescription &&
         serviceDescription.availableUserDomains.length > 0
       ) {